Question

我有一个附加到固定导航栏的下拉菜单。与当前Twitter设计使用的类似。

以下是此问题的链接：http://jsfiddle.net/JDahp/3/（已更新为比以前的迭代更简单）

我使用jQuery使菜单显示/消失，工作正常。菜单会在工具栏上设置动画而不是在其下方。

我无法理解为什么z-index没有覆盖下拉菜单的通常视觉堆叠？

以下是相关的CSS属性

#top-stuff{
    position:fixed;
    top:0;
    left:0;
    z-index:12;
    width:100%;
}

.dropdown {
    position: absolute;
    z-index: 1;
}

HTML的缩减版本：

<div id="top-stuff">
    <a href="" class="optionslinka">Options</a>
    <div class="dropdown" id="optionsdropdown">
        <!-- Drop down content is here -->
    </div>
</div>

Answer 1

你的小提琴有点复杂而且忙于我查看，但我认为你的问题很可能与IE所知的z-index错误有关（但也影响了其他浏览器）。

基本上，如果未在所有父容器上定义z-index，则每个z-index将启动一个新的“堆叠上下文”，这意味着它们不会正确重叠。想想2副牌而不是一张。

尝试在position:relative;z-index:auto;上方的所有父容器（或.dropdown等任何其他position:上设置absolute

了解更多信息的一些资源：
下拉菜单问题：http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
深入了解：http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

与您类似的问题：http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

你会注意到，任何位于代码中比菜单更低的z-index的定位元素都会出现在菜单上方 - 无论菜单的z-index是什么 - 正好相反你想要发生什么。

Answer 2

我删除了所有的z-index位，然后放入

z-index: -1;

在此

#optionsdropdown

这似乎有效我相信问题源于包含元素的位置固定..

CSS / jQuery下拉菜单。 Z-Index表现不尽如人意

2 个答案: