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。

编辑：看起来像有人殴打我发布的代码，所以我会留下这个作为解释为什么它的工作方式。