列表中的 IE z-index 相对/绝对错误答案

【问题标题】：IE z-index relative/absolute bug in list列表中的 IE z-index 相对/绝对错误
【发布时间】：2009-04-28 15:11:44
【问题描述】：

我有以下导航，其中 .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>

有人知道解决方法吗？

UPDATE http://brh.numbera.com/experiments/ie7_tests/zindex.html 准确地显示了我遇到的问题。我的原始帖子是在列表的上下文中，但我已将问题简化为当在具有 position:relative 的父元素内有一个带有 position:absolute 的元素时，z-index 似乎不起作用。

【问题讨论】：

样式看起来像什么，或者它们实际上只是设置位置？
我已经从风格中剔除了定位之外的所有内容，因为我已经向自己证明这就是问题所在
您能否更全面地解释一下您想要达到的效果。上面是指在上面还是覆盖在上面？
如果您有 CSS 代码，或者如果它上传到我们可以看到的地方，我们可能会提供帮助。事实上，我们不知道你对那个标记做了什么，所以它绝对可以是任何东西......
我试图复制该问题，但取决于您要执行的操作。所有浏览器的效果都不同，您的意图是什么？元素是否始终显示？

标签： html css internet-explorer

【解决方案1】：

这是一篇非常好的文章，解释了 machineghost 提到的堆叠问题。

http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex

您可能需要考虑的（取决于您希望在多个元素上定位的原因）是向 .base 添加一个悬停选择器（对于 IE6 使用 JavaScript），该选择器添加类以赋予它相关性。

.base:hover{position:relative;}

这意味着第二个 .base 没有 position: relative。

【讨论】：

很棒的文章，我以为我了解 z-index 等，但实际上我现在明白了，我已经解决了问题。
我知道这是一篇旧帖子 - 但 AJM 你介意分享你的解决方案吗，因为我似乎无法在 Ben 的网站上找到上述 .base css 测试的正确修复方法，同时保留两者.base div 作为位置：相对。
精彩绝伦的文章！感谢分享
在 :hover 上应用相对定位的好技巧，解决了我的 IE7 问题！谢谢:)

【解决方案2】：

好的，我认为您的问题可能源于对 z-index 的工作原理缺乏了解。 z-index 属性仅与 DOM 层次结构中同一级别的元素相关。换句话说，如果你有：

<ul id="a">
  <li id="b">b</li>
  <li id="c">c</li>
</ul>
<div id="d"></div>

和 "b" 和 "c" 的样式是重叠的，z-index 将确定哪一个在顶部。但是，如果“c”和“d”重叠，“d”将始终在顶部，无论 c 的 z-index 是多少，因为更靠近根 DOM 节点的元素将始终出现在嵌套更深的元素之上.

所以，只要“subnNav”是“topNav”的子级，我认为没有办法让它覆盖它的父级内容。换句话说，据我所知，这个问题没有解决方法，除了让“subNav”不是“topNav”的孩子。

(注意：话虽如此，CSS并不简单，所以可能仍然有一些方法可以得到我不知道的你想要的效果。我只能说，基于我对z的理解-index 和我相当好的通用 CSS 知识，我没有办法知道。）

【讨论】：

我从事 Web 开发已有 15 年了，我从未听说过 z-index 仅适用于 DOM Hierarchy 中同一级别的元素。您能否引用说明这一点的来源或规范？我很好奇。
我不能......或者更准确地说，我在谷歌上花了一分钟，变得懒惰，放弃了:-) 但是，我可以举一个例子来“证明”这一点。在下面的代码中，如果你去掉 z-index 属性，你会在左上角看到一个绿色的框，因为 a/b/c 都有相同的 z-index （而 c 是绿色的最后的）。然而，有了 z-index，你会看到……一个绿色框……尽管 b（黄色）的 z-index 比 c 高； c 仍然“胜过” b，因为它在 DOM 树中更高。

【解决方案3】：

添加

background: url(blank.gif);

对于绝对定位的元素为我解决了这个问题。 Mybe 它可以帮助你 2 :)

问候

【讨论】：

【解决方案4】：

我遇到了同样的问题，并且能够在 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;}

它的工作方式是每当用户将鼠标悬停在第一个 LI 上时，它会将浮动在它旁边的第二个 LI 设置为较低的 z-index 值。您当然可以更改 z-index 值以满足您自己的需要。

【讨论】：

【解决方案5】：

这对我有用。 ;)

http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/

【讨论】：

【解决方案6】：

CSSplay 的 Stu Nicholls 获得了 CSS Based nav w/ 6 level drop down（如果需要，可以扩展到更多）。这适用于 Internet Explorer IE5.5、IE6、IE7、Firefox、Opera 以及现在的 Safari、Netscape 8 和 Mozilla。

【讨论】：

【解决方案7】：

解决方案：按降序分配 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>

【讨论】：

这适用于 div，但操作员询问是否设置列表样式。我目前遇到了同样的问题。
上述解决方案在 IE7 中无法使用与 brh.numbera.com/experiments/ie7_tests/zindex.html 上相同的 css 样式表

【解决方案8】：

与@Orhaan 的回答类似，将背景属性设置为绝对元素是唯一对我有用的解决方案...

background-color: rgba(0,0,0,0);

Thanks Alex Leonoard

【讨论】：