CSS / jQuery下拉菜单 Z索引不符合预期

问题描述

| 我有一个固定在导航栏上的下拉菜单。与当前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>

    

解决方法

您的小提琴有些复杂，我很忙，但我认为您的问题可能与IE闻名的z-index错误有关（但也影响了其他浏览器）。 基本上，如果未在所有父容器上都定义

z-index

，那么每个

z-index

都会启动一个新的\'stacking context'，这意味着它们不会正确重叠。想想2张牌而不是1张牌。 尝试在

.dropdown

以上的所有父容器上设置

position:relative;z-index:auto;

（或其他任何

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是什么，与您想要的元素完全相反即将发生。     ,我删除了所有的z-index位并放了

z-index: -1; 

在这个

#optionsdropdown

这似乎可行，我相信问题出在位置固定的容纳元素。