jquery - 无法在 ie6 中将隐藏的 div 置于顶部

Question

我正在使用 JQuery 来显示/隐藏一个 div。它在除 IE6 之外的大多数浏览器中工作正常。当我显示 div 时，它最终隐藏在其他 div 后面而不是在它们之上。

你可以在这里明白我的意思:http://www.urlgone.com/d055c5/ (http://old.solesurvivorleather.com/static_product.html)。

如果您将鼠标悬停在右上角菜单上的电子邮件列表上，您会看到隐藏的 div“listform t”向下滑动并显示在顶部，但在 IE6 中它会向下滑动到 body-wrapper div 后面。

这是两个 div 的 CSS 代码:

#listform {
    background-color:#F4F4EF;
    border:1px solid #8F8A7E;
    display:none;
    margin:0;
    max-width:150px;
    padding:10px;
    position:absolute;
    right:0;
    text-align:left;
    top:30px;
    width:150px;
    z-index:999;
}
#body-wrapper, #utility-wrapper {
    margin:0 auto;
    position:relative;
    width:950px;
}
#body-wrapper {
    background-color:#FFFFFF;
    border:0 solid black;
    position:absolute;
}

Answer 1

在 Internet Explorer 中，定位元素生成一个新的堆叠上下文，从 0 的 z-index 值开始。因此 z-index 不能正常工作。要解决此问题，请给您的父元素 position:relative 并将其 z-index 设置为与您要设置的子元素相同的数字 z-index 上。子元素也应该有 position:absolute。它应该是这样的。

<div style="position: relative; z-index: 10">
    <div style="position:absolute;z-index:10;">
        <img src"..." />
        ...
    </div>
</div>