1

我有一个列表（ul - li），其中 li 是浮动的，所以我有一个带有块的网格。每个 li 都有相对位置。

在每个 li 中，我都有一个隐藏的 div（带有“more”类），只有当你将鼠标悬停在它的父 li 时才会显示。我想将 .more div 附加在 li 底部的 STARTING 向下并重叠任何其他 li 而不将其他 li 推开/向下。因为它附加到底部，所以我将 .more div 的底部位置设置为与 more div 的确切高度匹配的负值。

这或多或少有效，但 .more div 总是显示在其他 li 的下方。它只是重叠它的父级。

我已经尝试将所有 li 的静态 z-index 设为 5，并将所有 .more div 的静态 z-index 设为 500，但这仍然无济于事。

A 做了一个 jsFiddle：http: //jsfiddle.net/yNS6R/

相关代码：

    ul li
    {
        background: yellow;
        border: 1px solid green;
        float: left;
        height: 200px;
        margin: 0 10px 10px 0;
        position: relative;
        width: 22%;
        z-index: 2;
    }

    ul li .more
    {
        background: red;
        border-bottom: 1px solid green;
        border-left: 1px solid green;
        border-right: 1px solid green;
        bottom: -50px;
        display: none;
        height: 50px;
        left: -1px;
        position: absolute;
        width: 100%;
        z-index: 500;
    }

    ul li:hover .more
    {
        display: block;
    }
4

2 回答 2

1

从z-index你的ul liand中删除ul li .more，并将其添加到:hover状态：

ul li:hover .more {             
   display: block;
   z-index: 1;
}

更新了 jsfiddle

于 2013-02-05T10:07:51.933 回答
0

这只是因为您将 z-index 添加到 li。如果您删除 li 的 z-index，那么它将正常工作。

ul li
{
    background: yellow;
    border: 1px solid green;
    float: left;
    height: 200px;
    margin: 0 10px 10px 0;
    position: relative;
    width: 22%;
    z-index: 2; // here you add z-index to li
}
于 2013-02-05T10:09:44.960 回答