Question

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

在每一个li里面，我都有一个隐藏的div（带有'更多'类'），只有当你将它的父母li悬停时才会显示。。更多div我想在li的底部附上STARTING并重置任何其他li而不会推动其他li的消失。因为它附着在底部我将.more div的底部位置设置为与更多div的精确高度匹配的负值。

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

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

A创造了一个jsFiddle of all：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

这只是因为你向li添加了z-index。如果删除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
}

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

2 个答案: