ie自带css定位,css – IE忽略定位元素的Z-Index

IE再次被证明是我存在的祸根.我正在处理的网站的顶部有一个水平菜单,其中的一项触发了一个纯CSS菜单,该菜单位于父菜单DIV(相对位置)的绝对位置.这样就可以在IE和符合W3C标准的浏览器中完美地放置菜单.

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

问题是,然后打开顶部菜单,部分被页面下方的定位元素遮挡 – 实际上,即使在所有元素上定义了z-index属性,它也位于这些元素之下. (在CSS文件和内联中).

让IE正确显示的唯一方法是将菜单的实际HTML放在页面底部,下面(以DOM术语)放置页面上其他位置的元素.我只会这样做是绝对的最后手段.

所有元素都是相同的类型(div).这是相关的HTML：

[data]

[data]

[data]

和相关的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重置为零.