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中，定位元素生成一个新的堆叠上下文，从z-index值0开始。因此，z-index无法正常工作。要解决此问题，请为您的父元素position:relative添加并将其设置为z-index与您要设置{child}的子元素相同的数字。子元素也应该有z-index。这应该是它的样子。

position:absolute

Answer 2

你试过给body-wrapper一个较低的z-index值吗？

Answer 3

当涉及定位元素时，IE不会以直观的方式关注z-index。如果将#listform元素移动到代码的末尾（就在</body>之前），IE应该正确呈现内容。

或者，您可以将#listform元素放在#body-wrapper的末尾（就在</div>之前。）这会将元素放在堆栈中比所有项目更高的位置需要重叠。由于#body-wrapper的宽度是固定的，因此无论用户窗口大小如何，它都应提供稳定的偏移计算。

无法在ie6中获得隐藏的div

3 个答案: