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

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

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

Answer 2

问题在于，任何带有 z-index 的元素都会在其下方创建一个新的 "structure"。每个 li 的 z-index 都是 4，因此它们都处于相同的高度，然后按它们在页面上的位置排序。你给那个 li 的后代的 5 的 z-index 只会使它相对于 li 的其他 children 高。

一个选项是在打开 parent li 时更改 z-index，使用 class 和一些 javascript。

编辑：看起来有人通过发布代码击败了我，所以我将把它留作解释为什么它以这种方式工作。

Z-索引不工作

Z-Indexing Not working

html

css