IE浏览器忽略定位元素上的Z索引

IE又被证明是我存在的祸根。我正在处理的网站的顶部有一个水平菜单，其中的一个项目会触发一个绝对位于父菜单DIV（定位相对）内的纯CSS菜单。这使菜单在IE和符合W3C标准的浏览器中都完美无瑕。IE浏览器忽略定位元素上的Z索引

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

问题是，顶部菜单打开后，部件被位于页面下方的已定位元素遮挡 - 实际上，即使在所有元素上都定义了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; 
}

来源

2010-03-01 mwieczorek

我正在使用原型框架，所以我宁愿不使用任何jQuery，特别是一次性使用。 – mwieczorek 2010-03-01 10:36:05

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

来源

2010-03-01 10:21:43

以上的jQuery似乎与原型工作的解决方案好吧...我已经包含下面的PrototypeJS代码：

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

来源

2010-03-01 10:43:02 mwieczorek

有两点要注意：

suckerfish dropdowns被证明运行良好。为什么重新发明轮子？
IE只能可靠地呈现同级元素的z索引。因此，最好只使用“z-index”元素作为BODY标签的直接子元素。
如果您不想更改标记，则可能需要在“20”上方的#menu元素上设置z-index。问题是设置一个z-index将元素从流中取出（这是不希望的）。
style =“...”属性使得CSS非常具体（要求你在你的样式表中使用“！important”），请不要忘记迁移这些样式属性
“position：relative”triggers“ hasLayout“for IE

来源

2010-03-27 05:32:32 David

David，“position：relative”不会为IE触发hasLayout。它可以通过明确地设置元素的尺寸（宽度或高度）或使用缩放来触发：1.但如果您提到“位置：相对”作为针对IE的几个修复错误解决方案之一，那么您是对的。 – 2010-05-19 23:33:32

我有同样的问题。在玩了一段时间之后，我同意David的观点：“IE只能可靠地呈现兄弟元素的z索引。”

我确实想出了一个简单的备用解决方案。看起来，即将非同胞元素的z索引呈现为零（就像它们没有z索引一样）。我通过设置有问题的元素和它们的父元素来得到一个负z-索引来解决这个问题，把它们放在z-索引重置为零的元素下面，即ie。

来源

2012-07-21 08:08:37 deermouse

IE浏览器忽略定位元素上的Z索引

回答

相关问题