css - 相对父级中的绝对定位元素不与其他元素重叠

Question

我有一个列表 (ul - li)，其中 li 是 float 的，所以我有一个带 block 的网格。每里都有相对位置。

在每个 li 中，我都有一个隐藏的 div(类为“更多”)，只有当您将鼠标悬停在它的父 li 上时才会显示。我想附加的 .more div 从 li 的底部开始向下并重叠任何其他 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;
    }

Answer 1

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

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

Updated jsfiddle