IE忽略定位元素上的Z-Index [英] IE is ignoring Z-Index on positioned elements

问题描述

IE再次被证明是我生存的祸根。我正在工作的网站顶部有一个水平菜单，该菜单项触发一个纯CSS菜单，该菜单绝对位于父菜单DIV（相对位置）内。这样可以将菜单完美地放在IE和W3C兼容的浏览器中。

IE yet again is proving to be the bane of my existence. The top of a site I'm working on has a horizontal menu, an item of which triggers a pure-CSS menu that is positioned absolute within the parent menu DIV (positioned relative). This places the menu perfectly in both IE and the W3C compliant browsers.

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

The problem arises when I have more positioned elements further down on the page. These are also positioned relative, because there is data inside them that needs to be positioned absolute... again, this displays properly in all browsers I've tested it on.

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

The problem is, that then the top menu is opened, part is obscured by the positioned elements further down the page - in effect, it's positioned BELOW these elements even though there are z-index properties defined on all. (in both the CSS file and inline).

让IE正确显示此内容的唯一方法是将菜单的实际HTML放在页面底部，位于DOM之下，位于页面其他位置的位置。我只会这样做是绝对的不得已。

The only way to get IE to display this properly is to place the actual HTML for the menu at the bottom of the page, below (in DOM terms) the positioned elements elsewhere on the page. I would only do this as an absolute last resort.

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

All Elements are the same type (div). Here is the relevant 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索引。

I had the same problem. After playing around a bit I agree with David: "IE only reliably renders z-indexes for sibling elements."

我确实提出了一个简单的替代解决方案。看来，即将非兄弟元素的z-index呈现为零（好像它们没有z-index）。我通过将有问题的元素及其父元素设置为具有负的z-index来解决该问题，将它们置于z-index重置为零的元素下面，即。

I did come up with an easy alternate solution. It seems that ie renders z-index for non sibling elements as zero (as if they didn't have a z-index). I solved the problem by setting the offending elements and their parent elements to have a negative z-index, putting them below the elements with z-index reset to zero by ie.

这篇关于IE忽略定位元素上的Z-Index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！