絕對定位元素在相對父母不重疊其他元素

Question

我有一個列表（ul - 李）裏的浮動，所以我有一個網格與塊。 每一個李都有相對的位置。

在每一個裏面我都有一個div（帶有'more'類），它是隱藏的，只有當你懸停它的父李時才顯示。更多的div我想附加在李的底部開始下去，並重疊其他任何其他的李，而不是推這個其他李的離開/下。 因爲它連接到底部，我將.more div的底部位置設置爲與更多div的確切高度匹配的負值。

這或多或少的作品，但更多的div總是顯示在其他李的下面。它只是與父母重疊。

我試過已經給所有li的靜態z-index爲5，所有.more div的靜態z-index爲500，但這仍然沒有幫助。提前

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

感謝：

一個做了的jsfiddle的一切：http://jsfiddle.net/yNS6R/

相關的代碼！

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