CSS / jQuery 下拉菜单。 Z-Index 未按预期运行

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将启动一个新的“堆叠上下文”，这意味着它们不会正确重叠。 想想两副牌而不是一副牌。

尝试设置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

这似乎有效，我相信问题源于修复了 position 的包含元素。