Z索引不起作用

Question

我遇到了一個問題，我似乎無法讓我的z索引在我的菜單中的.dropdown div上工作。有人有一個想法，爲什麼這不起作用？

我的CSS說，它應該是在5的水平是在頁面上比任何其他更高：

ul.dimensions > li.open > ul.dropdown { 
    display: block; 
    position: absolute; 
    background: #fff; 
    list-style: none; 
    padding: 1em; 
    width: 261px; 
    box-shadow: 5px 5px 1px rgba(0, 0, 0, 0.4); 
    border: 1px solid #afafaf; 
    z-index: 5; 
    margin-top: -1px; 
    transition: all 0.5s ease; 
} 

http://jsfiddle.net/yn979r0g/

Answer 1

ul.dimensions>li.open{ 
    z-index:6; 
} 

演示 - http://jsfiddle.net/yn979r0g/2/

Answer 2

麻煩任何帶有z-index的元素都會在它下面創建一個新的「結構」。 li每個都有z-index 4，所以它們都處於相同的高度，然後按照它們在頁面上的位置排序。你給那個李的後代的z-索引只會使它對李的其他子女高度相對。

一種選擇是在父類li打開時使用類和一些javascript來更改父類li的z-index。

編輯：看起來像有人毆打我發佈的代碼，所以我會留下這個作爲解釋爲什麼它的工作方式。