IE7 z-index堆栈错误 - 如何正确堆栈2个绝对定位元素？

我运行到IE7的z-index堆叠错误，但我不能找到一个方法来解决它。这里有一个简单的HTML测试用例：IE7 z-index堆栈错误 - 如何正确堆栈2个绝对定位元素？

<!doctype html /> 
<html> 
<head> 
</head> 
<body> 
<div style="position:relative; width:500px;"> 
    <div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;"> 
     <p style="margin:0;">Menu</p> 
     <ul style="position:absolute; z-index:100; list-style:none; margin:0; padding:0; background-color:#fff; border:1px solid #0000ff;"> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
      <li><a href="#">Menu Item</a></li> 
     </ul> 
    </div> 
    <div style="position:absolute; z-index:1; top:40px; width:500px; height:75px; background-color:#ccc;"> 
     <p>Header</p> 
    </div> 
</div> 
</body> 
</html>

在这个例子中，你会发现在顶层div中有两个绝对定位的元素。第一个是菜单，第二个是标题。菜单项目堆叠不正确，并显示在标题后面。

Screenshot

我读过很多关于IE7的z-index错误的帖子，但我没有发现任何东西，可以帮助我与此特定问题。谢谢！

来源

2012-03-19 Redtopia

'<！DOCTYPE HTML />'是不是一个有效的DOCTYPE。相反，使用'<！DOCTYPE html>'这应该阻止IE使用quirksmode。 – Zeta 2012-03-19 18:42:08

这是IE7和z-index的一个普遍问题。以下是我回答的前一个问题的参考，其中还包含更多参考资料供进一步阅读。

Text overlapping items in Dropdown items

长话短说，如果头框和菜单框是sibings，你需要设置那些z-index的。如果仅在菜单项上设置z-index，则IE7不起作用。

<div style="position:absolute; top:0; left:30px; width:300px; height:30px; border:1px solid #ff0000;">

上面的DIV需要更高的z-index，因为它是包含正在进行重叠的子项的兄弟。

从某种意义上说，它需要在IE7中的父元素给予的z-index到它的孩子。虽然技术上不正确，但用这种方式说或理解起来更容易。

这里有一个小提琴：http://jsfiddle.net/JT9tw/

来源

2012-03-19 19:04:47 jmbertucci

确保骊都头之后。很高兴你的li具有比标题更高的z-index。但是李先生是另一个堆栈的孩子。和堆具有为0 的z-index因此，这意味着贵丽在于具有0本身的z索引的元素具有Z-索引关100。标题是z =索引1的另一个堆栈，位于另一个div（及其子节点）之上。

来源

2012-03-19 18:46:27

父元素位置应设置为相对和绝对定位元件应具有它们的显示集合。

来源

2012-03-19 18:58:47

IE7 z-index堆栈错误 - 如何正确堆栈2个绝对定位元素？

回答

相关问题