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

Posted 2023-03-06

【中文标题】IE 忽略定位元素上的 Z-Index

【英文标题】：IE is ignoring Z-Index on positioned elements

【发布时间】：2011-01-22 05:48:41

【问题描述】：

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;

【问题讨论】：

我正在使用原型框架，所以我不喜欢使用任何 jQuery，尤其是一次性使用。

【参考方案1】：

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

【参考方案2】：

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

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

【参考方案3】：

几点说明：

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

【讨论】：

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

【参考方案4】：

我遇到了同样的问题。在玩了一会儿之后，我同意 David 的观点：“IE 只能可靠地呈现同级元素的 z-index。”

我确实想出了一个简单的替代解决方案。似乎 ie 将非同级元素的 z-index 呈现为零（好像它们没有 z-index）。我通过将违规元素及其父元素设置为负 z-index 来解决问题，将它们放在 z-index 由 ie 重置为零的元素下方。