Z-Index 和 IE7 的问题答案

【问题标题】：Issue with Z-Index and IE7Z-Index 和 IE7 的问题
【发布时间】：2011-01-15 07:21:44
【问题描述】：

我已经在板上浏览并尝试了一堆这些解决方案，但我仍然卡住了。

我正在查看的页面是here。在 IE7 中，下拉菜单显示在主页内容的后面。如果您转到其中一个站点部分，通过单击“菜单”，它们甚至会显示在动态创建的侧边栏后面。

我已经为下拉菜单提供了 1000 的 z-index 和相对定位。在主页上，图像具有相对定位和较小的 z-index（1 或 2）。

有什么想法吗？

【问题讨论】：

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

【解决方案1】：

您需要将position:relative 或zoom:1 添加到包含下拉菜单的所有父元素中。例如：

CSS：

.posRelative { position:relative; }

通用 HTML：

...
<body>
    <div id="header" class="posRelative">
        <ul id="menu" class="posRelative">
            <li class="posRelative">....</li>
            <li class="posRelative">....</li>
            <li class="posRelative">....</li>
        </ul>
    </div>
...

显然有更有效的方法来应用该样式属性，但希望您能明白。

【讨论】：

【解决方案2】：

我认为是因为ul的绝对定位。 Internet Explorer 为绝对定位的任何东西创建一个新的 z-index。

看看你能不能把它们改成相对定位。

【讨论】：

【解决方案3】：

您也可以尝试此修复程序http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/，它适用于 IE6，并且在 IE7 上也为我节省了一些时间。您只需为 IE6&7 设置 z-Index 属性，并做相反的逻辑。

【讨论】：