我在放置为 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 代码,但它似乎对我不起作用。
希望你能帮帮我!
最佳答案
元素的 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——看起来它现在正在按预期工作。
关于CSS 下拉菜单和 jquery 选择和 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23919432/