相对父元素中的绝对位置元素不与其他元素重叠

Question

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

[在每个li内，我都有一个div（类为'more'），该div是隐藏的，仅当您将其悬停在其父li上时才显示。我想在.more div上将“开始”附加到要关闭的li的底部，并覆盖其他任何li，而不用推开其他li的距离。因为它是连接到底部的，所以我将.more div的底部位置设置为与more div的确切高度匹配的负值。

[这或多或少有效，但.more div始终显示在其他li的下面。它只是与父项重叠。

[我已经尝试给所有li赋予一个5的静态z索引，给所有.more div赋予500的静态z索引，但这仍然无济于事。

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;
    }

Answer 1

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

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

Updated jsfiddle

Answer 2

这仅是因为您将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
}