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 :

on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto"

换句话说，由于 header 有 position:fixed，它的子元素与 header 之外的元素处于不同的堆栈上下文中(比如你的 chznselect 元素)。

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

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