IE 忽略定位元素上的 Z-Index

Question

事实证明，IE 再次成为我生存的祸根。我正在开发的网站顶部有一个水平菜单，其中的一个项目会触发一个纯 CSS 菜单，该菜单绝对定位在父菜单 DIV 内（相对定位）。这使得菜单可以完美地放置在 IE 和 W3C 兼容浏览器中。

当我在页面下方有更多定位元素时，就会出现问题。它们也是相对定位的，因为它们内部的数据需要绝对定位......同样，这在我测试过的所有浏览器中都能正确显示。

问题是，然后打开顶部菜单，部分内容被页面下方的定位元素遮挡 - 实际上，它位于这些元素下方，即使所有元素都定义了 z-index 属性。 （在 CSS 文件和内联中）。

让 IE 正确显示此内容的唯一方法是将菜单的实际 HTML 放置在页面底部，位于页面其他位置的定位元素下方（用 DOM 术语来说）。我只会将其作为绝对的最后手段。

所有元素都是相同的类型（div）。这是相关的 HTML：

<div id='menu'>
<div id='cat_menu' style='display:none;z-index:10000;'>
<table cellspacing='0' cellpadding='0' class='brmenu' width='100%'>
    [data]
</table>
</div>

<div class='product_new' style='z-index:20;'>[data]</div>
<div class='product_listing' style='background-color:#FFFFFF;'>[data]</div>

以及相关的CSS：

div#menu {
height: 26px;
padding: 0;
position: relative;
}

div#cat_menu {
position: absolute;
top: 25px;
left: 115px;
width: 300px;
z-index: 1000;
}

 div.product_new {
background-image: url("/images/sp_images.png");
background-position: 0 -108px;
background-repeat: no-repeat;
padding 0px;
height: 40px;
font-size: 9pt;
margin-top: 5px; 
position: relative;
z-index: 20;
}

Answer 1

我也有同样的问题。经过一番尝试后，我同意 David 的观点：“IE 只能可靠地呈现同级元素的 z 索引。”

我确实想出了一个简单的替代解决方案。看起来 ie 将非同级元素的 z 索引呈现为零（就好像它们没有 z 索引一样）。我通过将有问题的元素及其父元素设置为负 z 索引，将它们放在 z 索引重置为零的元素下方，解决了这个问题。

Answer 2

尝试： http://css-tricks.com/snippets/jquery /修复-ie-z-index/

Answer 3

上面的 jQuery 解决方案似乎也适用于 Prototype...我在下面包含了 PrototypeJS 代码：

var zIndexNumber = 1000;
$("div").each(function(e) {
    e.setStyle({ zIndex: zIndexNumber });
    zIndexNumber -= 10;
});

Answer 4

有几点需要注意：

• suckerfish 下拉菜单已被证明效果良好。为什么要重新发明轮子？
• IE 仅可靠地呈现同级元素的 z 索引。因此，最好仅使用“z-index”元素作为 BODY 标记的直接子元素。
• 如果您不想更改标记，则可能需要在“20”上方的 #menu 元素上设置 z 索引。问题是设置 z-index 会将元素从流中取出（这是不可取的）。
• style="..." 属性使 css 非常具体（要求您在样式表中使用“!important”。请不要忘记迁移这些样式属性）
• “position:relative”触发 IE 的“hasLayout”