Question

我有以下导航：.topNav的位置：relative和subnav的位置：绝对。由于z-index问题，我无法将子列表显示在主列表上。这似乎是一个已知问题。

<ul>
<li class="topNav">About Us
<ul class="subNav"><li> Subsection A</li><li>Subsection B</li></ul>
</li>
</ul>

有没有人知道解决方法？

更新http://brh.numbera.com/experiments/ie7_tests/zindex.html显示我遇到的问题。我的原始帖子是在列表的上下文中但是我已经将问题简化为这样的事实：当一个元素具有position：absolute在父元素中具有position：relative

时，z-index似乎不起作用

Answer 1

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

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

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

.base:hover{position:relative;}

这意味着第二个.base没有位置：relative。

Answer 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知识，我不知道。）

Answer 3

添加

background: url(blank.gif);

对于绝对定位的元素解决了我的问题。也许它可以帮助你2：）

问候

Answer 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值以满足您自己的需要。

Answer 5

这对我有用。 ;）

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

Answer 6

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

Answer 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>

Answer 8

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

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

Thanks Alex Leonoard

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

8 个答案: