CSS下拉菜单、jQuery Chosen和z-index。

Question

我在确定z-index css代码和jquery插件的位置方面遇到了问题。

正如您在这里看到的那样，我的下拉菜单位于所有内容的顶部：http://jsfiddle.net/Z9JE5/3/

我的HTML代码：

<div id="header">
    <div id="mainmenu">
        <ul>
            <li><a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Submenu 1</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 2</a>
                <ul>
                    <li><a href="#">Submenu 1</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="chznselect">
    <select class="chz-select" name="example">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
        <option value="4">Value 4</option>
        <option value="5">Value 5</option>
    </select>
</div>

我已经尝试在各处添加z-index代码，但似乎对我无效。

希望你能帮助我解决这个问题！

- Aleksandr baltazor

Answer 1

一个元素的 z-index 只与同一层叠上下文中的其他元素有关。

来自 MDN 的层叠上下文文档：

在移动 WebKit 和 Chrome 22+ 上，即使 z-index 是 "auto"，position: fixed 总是创建一个新的层叠上下文。

换句话说，由于 header 具有 position:fixed，其子元素与 header 外部的元素（如您的 chznselect 元素）处于不同的层叠上下文中。

然而，header 本身与 chznselect 处于相同的层叠上下文中。由于您为 chznselect 指定了大于 0 的 z-index，而没有为 header 指定 z-index（即它的 z-index 是 auto），因此 chznselect 将始终显示在 header 及其所有子元素的顶部。

这是你的 jsfiddle 的更新版本，我给 header 设置了比 chznselect 更高的 z-index 值——现在它看起来已经按照预期工作了。

- Kylok