Html IE z-index 列表中的相对/绝对错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/798482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE z-index relative/absolute bug in list
提问by AJM
I have the following navigation where .topNav has position:relative and subnav has position:absolute. I cant get the sublist to appear over the main list due to z-index problems. This seems to be a known problem.
我有以下导航，其中 .topNav 有 position:relative 和 subnav 有 position:absolute。由于 z-index 问题，我无法让子列表出现在主列表上。这似乎是一个已知问题。
<ul>
<li class="topNav">About Us
<ul class="subNav"><li> Subsection A</li><li>Subsection B</li></ul>
</li>
</ul>
Does anyone know of a workaround?
有谁知道解决方法？
UPDATE http://brh.numbera.com/experiments/ie7_tests/zindex.htmlshows exacly the problem I have. My original posting was in the context of a list but I have reduced the problem to the fact that z-index dosn't seem to work when have an element with position:absolute inside a parent element with position:relative
更新http://brh.numbera.com/experiments/ie7_tests/zindex.html 准确地显示了我遇到的问题。我最初的帖子是在列表的上下文中，但我已将问题简化为这样一个事实，即当在具有 position:relative 的父元素中有一个带有 position:absolute 的元素时，z-index 似乎不起作用
回答by Steve Perks
Here's a very good article that explains the stacking issues that machineghost mentions.
这里有一篇很好的文章，解释了 machineghost 提到的堆叠问题。
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
What you might want to consider (depending on why you're wanting the positioning on multiple elements) is adding a hover selector to .base (use JavaScript for IE6) that adds the class to give it relativity.
您可能要考虑的（取决于您想要在多个元素上定位的原因）是将悬停选择器添加到 .base（对 IE6 使用 JavaScript）添加类以使其具有相对性。
.base:hover{position:relative;}
This then means that the second .base doesn't have position: relative.
这意味着第二个 .base 没有 position:relative。
回答by machineghost
Ok, I think your problem probably stems from a lack of understanding about how z-index works. The z-index property is only relevant for elements at the same level in the DOM hierarchy. In other words, if you have:
好的，我认为您的问题可能源于对 z-index 的工作原理缺乏了解。z-index 属性仅与DOM 层次结构中处于同一级别的元素相关。换句话说，如果你有：
<ul id="a">
<li id="b">b</li>
<li id="c">c</li>
</ul>
<div id="d"></div>
and "b" and "c" are styled such that they overlap, z-index will determine which one ends up on top. However, if "c" and "d" overlap, "d" will always be on top, no matter what c's z-index is, because elements that are closer to the root DOM node will always appear above elements that are nested deeper in.
并且“b”和“c”的样式使它们重叠，z-index 将确定哪一个最终位于顶部。但是，如果 "c" 和 "d" 重叠，则 "d" 将始终在顶部，无论 c 的 z-index 是什么，因为更接近根 DOM 节点的元素将始终出现在嵌套更深的元素之上.
So, as long as "subnNav" is a child of "topNav," I don't think there is any way to make it cover it's parent's content. In other words, as far as I know there is no workaround for this issue, except to make "subNav" not be a child of "topNav".
因此，只要“subnNav”是“topNav”的子级，我认为没有任何方法可以使其覆盖其父级的内容。换句话说，据我所知，这个问题没有解决方法，除了让“subNav”不是“topNav”的孩子。
(NOTE: All that being said, CSS is not simple, so there may still be some way to get the effect you want that I'm not aware of. All I can say is that, based on my understanding of z-index and my pretty good general CSS knowledge, there's no way that I know of.)
（注意：说了这么多，CSS 并不简单，所以可能仍然有一些我不知道的方法可以获得你想要的效果。我只能说，基于我对 z-index 和我相当不错的一般 CSS 知识，我不知道。）
回答by Orhaan
adding
添加
background: url(blank.gif);
for absolutely positioned elemnts solves the problem for me. Mybe it can helps u 2 :)
绝对定位的元素为我解决了这个问题。Mybe 它可以帮助你 2 :)
regards
问候
回答by user376724
I had the same issue and was able to fix it In IE6 and 7. Combining http://code.google.com/p/ie7-js/with the following CSS the issue went away. With my issue I had some items inside a list floated left and had a tooltip that popped up whenever the user hovered over the li. To fix it, I adde this:
我有同样的问题，并且能够在 IE6 和 7 中修复它。将http://code.google.com/p/ie7-js/与以下 CSS结合，问题就消失了。对于我的问题，列表中的一些项目向左浮动，并且每当用户将鼠标悬停在 li 上时都会弹出一个工具提示。为了解决它，我添加了这个：
.ul li:hover {position:relative;z-index:4;}
.ul li:hover + li {position:relative;z-index:3;}
.ul li:hover {position:relative;z-index:4;}
.ul li:hover + li {position:relative;z-index:3;}
The way it works is whenever the user hovers over the first LI for example, it sets the second LI floated next to it to a lower z-index value. You can of course change the z-index values to fit your own needs.
例如，它的工作方式是每当用户将鼠标悬停在第一个 LI 上时，它就会将浮动在它旁边的第二个 LI 设置为较低的 z-index 值。您当然可以更改 z-index 值以满足您自己的需要。
回答by Jerad Rutnam
回答by grayspace
Similar to answer by @Orhaan, setting a background property to the absolute element is the only solution that worked for me...
与@Orhaan 的回答类似，将背景属性设置为绝对元素是唯一对我有用的解决方案......
background-color: rgba(0,0,0,0);
回答by Fatih Hayrio?lu
Solution: assign z-index in decreasing order
解决方案：按降序分配 z-index
<div class="base" style="z-index:2">
<div class="inside">
This has some more text in it. This also has a background. This should obscure the second block of text since it has a higher z-index.
</div>
This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it.
</div>
<div class="base" style="z-index:1">
This is the second div. You should not be seeing this in front of the grey box. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This second box should be obscured by the grey box.
</div>
回答by Phill Pafford
Stu Nicholls at CSSplay has a get CSS Based nav w/ 6 level drop down(Can be expanded to more if needed). This works in Internet Explorer IE5.5, IE6, IE7, Firefox, Opera and now Safari, Netscape 8 and Mozilla.
CSSplay 的 Stu Nicholls 有一个基于 CSS 的导航，带有 6 级下拉菜单（如果需要，可以扩展到更多）。这适用于 Internet Explorer IE5.5、IE6、IE7、Firefox、Opera 以及现在的 Safari、Netscape 8 和 Mozilla。
