jQuery 和父 div 的 IE7 z-index 问题（可能的堆叠上下文问题）答案

【问题标题】：IE7 z-index issues with jQuery and parent divs (possible stacking context problems)jQuery 和父 div 的 IE7 z-index 问题（可能的堆叠上下文问题）
【发布时间】：2012-08-08 23:42:32
【问题描述】：

我今天一直在努力解决 IE7 z-index 问题，但我无法深入了解它。我下面的代码显示了一个自定义样式的下拉菜单，它位于名为wrapper_bottom_outer 的 div 上方，在除 IE7 之外的所有其他浏览器上，代码都可以在wrapper_bottom_outer 之上显示选择/下拉类。但是，只有在 IE7 上，select/dropdown 才会在wrapper_bottom_outer div 后面显示。

我今天已经read up 讨论了开发人员在 IE7 和 z-indexing 方面遇到的问题，我今天肯定遇到了这些问题。

我有什么明显的遗漏吗？问题归结为堆叠上下文吗？如果是这样，我该如何解决？

<div class="select" style="width: 127px;">
    <dl class="dropdown" style="z-index: 2060; width: 127px;">
        ...content in here...
    </dl>
</div>

<div id="wrapper_bottom_outer" style="z-index: 10;">    
    ...content in here...
    <div id="wrapper_bottom"></div>
</div>

#wrapper_bottom_outer {
    height: 195px;
    overflow: visible;
    position: relative;
}

.dropdown {
    position: relative;
    height: 18px;
    float: left;
    font-size: 11px;
    line-height: 12px;
 }

.select {
    position: relative;
}

$("#wrapper_bottom").mouseenter(function(){ 
    $(".select").css('zIndex', '1000');     
    $(".dropdown").css('zIndex', '1001');
    $("#wrapper_bottom_outer").css('zIndex', '1002');
});

$("#wrapper_bottom").mouseleave(function(){
        $(".select").css('zIndex', '2059');
    $(".dropdown").css('zIndex', '2060');
    $("#wrapper_bottom_outer").css('zIndex', '10');
});

【问题讨论】：

当你明确地给下拉类定位时会发生什么 - 即 .dropdown { position: relative; }
@McNab 我已经在.dropdown 类上拥有了一个position: relative;。我应该将其添加到原始帖子中，现在已更新。不幸的是，它没有影响。
你的父母应该是相对的，但孩子（下拉菜单）应该是“位置：绝对”
@bobek 我已将 .select 设置为 relative 的位置，并将 .dropdown 设置为 absolute 的位置，但这对 IE7 上的 z-indexing 没有影响。下拉/选择仍然显示在wrapper_bottom_outer 后面。标记非常广泛，因此很难为此将 jsFiddle 放在一起。我现在看不出问题出在哪里。所有在线博客文章、教程和 cmets 都建议将父级的 z-index 设置为高于子级是解决方法。我已经这样做了，但对 IE7 仍然没有影响。

标签： jquery html css internet-explorer-7 z-index

【解决方案1】：

当您使用 Z-index 时，您必须记住 z-index 仅适用于某些位置：相对、绝对和固定。

此外，除了在您想要定位的实际元素上设置 z-index 之外，您还必须将 z-index 添加到其父元素。

试一试，现在让我们看看它是如何工作的。如果它不创建 jsfiddle 会有很大帮助：http://jsfiddle.net/

【讨论】：

我刚刚向父 div select 添加了一个 zIndex 值，正如您在编辑后的帖子中看到的那样。这似乎对任何浏览器都没有影响。我的大部分阅读都集中在在 IE7 中设置 z-indexes 时了解父级，但即使执行上述操作也没有什么区别。
请注意，我说过 z-index 仅适用于特定位置：相对、绝对和固定 - 你没有为你的班级指定任何东西，你只为父母指定。