CSS下拉列表显示在下面的下拉菜单后面，IE6，IE7，绝对定位错误

Question

我面临着我在 css 中发现的最疯狂的问题之一...

我有两个 CSS-jQuery 水平下拉菜单，一个在上，一个在下，单击它时显示下拉列表。

当我单击 IE6 和 IE7 中的上部下拉菜单时，问题就出现了，绝对定位的元素会覆盖相对定位的元素。上方的下拉列表（绝对）显示在下方的下拉列表（相对）后面。

JavaScript:

$("button").click(function(e){
    $(".menu").hide();
    $(this).siblings(".menu").show();
    e.stopPropagation()
});
$(document).click(function(){$(".menu").hide()});

HTML:

<div class="top">
    <div class="dropdown">
        <button>Dropdown1 v</button>
        <div class="menu">
            <a href="#link">Option a</a>
            <a href="#link">Option b</a>
            <a href="#link">Option c</a>
        </div>
    </div>
    <div class="dropdown">
        <button>Dropdown2 v</button>
        <div class="menu">
             <a href="#link">Option d</a>
             <a href="#link">Option e</a>
            <a href="#link">Option f</a>
        </div>
    </div>
</div>

CSS:

.dropdown{float:left;display:inline;clear:left;position:relative}
.menu{position:absolute;left:0;top:22px;z-index:1}
.menu  a{display:block}

.menu{display:none;border:1px solid #ccc;padding:3px;background:#ffffe0}

这是示例：

http://jsfiddle.net/AEBaW/

解决方案这里：

http://jsfiddle.net/AEBaW/2/

Answer 1

IE 中的 z-index 存在一个已知问题。它对绝对定位元素的 z-index 处理方式与对相对定位元素的 z-index 处理方式不同。就像您有两组 z 索引一样。如果您无法让所有元素使用相同的定位，则可以通过使用具有相同定位的包装器来修复此问题。

编辑1：

http://caffeineoncode.com/2010/ 07/the-internet-explorer-z-index-bug/

编辑2：

z索引错误

Z-Index IE 错误修复？

Internet Explorer z-index 错误？

编辑 3：

jQuery 解决方案：

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery /

http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/

Answer 2

当我必须处理 IE z-index 问题时，我发现最好的解决方案是确保每个容器都是同一堆叠索引的一部分。意思是，所有元素都充当同一堆栈的层。这通常就是 IE 表现得滑稽的原因。

您可以通过添加position:relative;来做到这一点z-index:auto; 到所有容器。如果可能的话，您希望一直这样做。这应该迫使 IE 将所有内容都考虑为一个堆栈，从而正确分层。