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

【问题标题】：IE7 z-index stacking bug - how do you stack 2 absolute positioned elements correctly?IE7 z-index 堆叠错误 - 如何正确堆叠 2 个绝对定位的元素？
【发布时间】：2012-03-20 03:10:44
【问题描述】：

我遇到了 IE7 z-index 堆叠错误，但我找不到解决方法。这是一个简单的 HTML 测试用例：

<!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 中有两个绝对定位的元素。第一个是菜单，第二个是标题。菜单项未正确堆叠并显示在标题后面。

我已经阅读了很多关于 IE7 z-index 错误的帖子，但是我没有找到任何可以帮助我解决这个特定问题的东西。谢谢！

【问题讨论】：

<!DOCTYPE html/> 不是有效的文档类型。请改用<!DOCTYPE html>，这样可以防止 IE 使用 quirksmode。

标签： css internet-explorer-7 z-index

【解决方案1】：

这是 IE7 和 z-index 的常见问题。这是对我回答的上一个问题的参考，其中还包含更多参考以供进一步阅读。

Text overlapping items in Dropdown items

长话短说，如果 HEADER 框和 MENU 框是同级的，则需要在它们上设置 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/

【讨论】：

【解决方案2】：

确定 li 在标题后面。很高兴您的 li 具有比标题更高的 z-index。但是 li 是另一个栈的孩子。并且该堆栈的 z-index 为 0。所以这意味着你的 li 在一个 z-index 本身为 0 的元素中的 Z-index 为 100。 Header 是另一个 z=index 1 的堆栈，位于另一个 div（及其子级）之上。

【讨论】：

【解决方案3】：

父元素位置应设置为相对，绝对定位元素应设置显示。

【讨论】：