无法在ie6中获得隐藏的div答案

【问题标题】：Cant get hidden div on top in ie6无法在ie6中获得隐藏的div
【发布时间】：2011-07-18 22:40:40
【问题描述】：

我正在使用 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;
}

【问题讨论】：

标签： jquery css xhtml internet-explorer-6

【解决方案1】：

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

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

【讨论】：

这确实解决了问题，但后来我遇到了正确定位 div 的问题。如果我将它放在 div 之外，我需要它在其中，它不会直接显示在单词电子邮件列表下。据我了解，位置可能会因用户屏幕设置而异。有什么建议可以解决这个问题吗？
你可以把它放在body wrapper div中——我更新了上面的答案，看看你是否可以。

【解决方案2】：

在 Internet Explorer 中，定位元素会生成一个新的堆叠上下文，从 z-index 值 0 开始。因此 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>

【讨论】：

【解决方案3】：

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

【讨论】：