css – IE忽略定位元素的Z-Index

2023年11月1日 194次阅读

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;
}

最佳答案 我有同样的问题.在玩了一下之后我同意David的观点：“IE只能为兄弟元素可靠地呈现z-indexes.”

我确实提出了一个简单的替代解决方案.似乎即将非兄弟元素的z-index呈现为零(就好像它们没有z-index一样).我通过将有问题的元素及其父元素设置为具有负z-索引来解决问题,将它们置于元素下面,并将z-index重置为零.

点赞