jQuery 和父 div 的 IE7 z-index 问题(可能的堆叠上下文问题)

Question

我今天一直在努力解决IE7 z索引问题，但我看不到它的根源。我下面的代码显示了一个名为 wrapper_bottom_outer 的div 上方的自定义样式下拉菜单，在 IE7 以外的所有其他浏览器上，代码都可以在 wrapper_bottom_outer 之上显示选择/下拉类。但是，只有在IE7上，select/dropdown才会显示在wrapper_bottom_outerdiv后面。

我今天阅读了开发人员在IE7和z索引方面遇到的问题，我今天肯定遇到了这些问题。

我缺少什么明显的东西吗？问题是否归结为堆叠上下文？如果是这样，我该如何解决？

<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');
});

Answer 1

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

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

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