0

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

我今天已经阅读了开发人员在使用 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');
});
4

1 回答 1

1

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

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

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

于 2012-08-08T15:33:50.127 回答