CSS下拉菜单和jquery选择和z-index

Question

我在放置为 jquery 选择的 z-index css 代码和插件的位置时遇到问题。

我的下拉菜单位于所有内容之上，您可以在此处看到：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 代码，但它似乎对我不起作用。

希望你能帮帮我！

Answer 1

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

来自MDN's stacking context doc：

在移动 WebKit 和 Chrome 22+ 上，位置：固定总是会创建一个新的 堆叠上下文，即使 z-index 为“auto”

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

但是，header 本身与chznselect 处于相同的堆栈上下文中。由于您给 chznselect 一个大于 0 的 z-index 而不为 header 指定 z-index（即它的 z-index 是自动的），chznselect 将始终显示在 header 及其所有子元素的顶部元素。

这是您的jsfiddle 的更新版本，其中我给header 提供了一个大于chznselect 的z-index--看起来它现在正在按预期工作。