html - Z-索引不工作

Question

我遇到了一个问题，我似乎无法让我的 z-indexing 在我的菜单中的 .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

问题在于，任何具有 z-index 的元素都会在其下方创建一个新的“结构”。每个 li 的 z-index 都是 4，所以它们都在同一高度，然后按它们在页面上的位置排序。您赋予该 li 的后代 5 的 z-index 只会使其相对于该 li 的其他子代更高。

一种选择是在打开时使用类和一些 javascript 更改父 li 的 z-index。

编辑:看起来有人通过发布代码打败了我，所以我只留下这个作为解释为什么它以这种方式工作。