Internet Explorer 7 中的 z-index 问题答案

【问题标题】：z-index issue in Internet explorer 7Internet Explorer 7 中的 z-index 问题
【发布时间】：2012-04-13 03:30:56
【问题描述】：

当用户悬停在主菜单上时，我使用 jquery 的下拉列表，它会下拉，并且在除 IE7 及以下的所有浏览器中都能正常工作，我正在使用 z-index 来显示下拉菜单- 所有元素的前面，但它不起作用。

菜单项（dummydummy）位于文本框和按钮的后面

子菜单项的样式是

#sub-menu {

z-index: 1000;
}

文本框和按钮被分组在一个div中，div的样式是

#grouped {
left: 100px;
position: absolute;
z-index:1;
}

【问题讨论】：

在没有看到完整的标记和 css 的情况下很难确定（或者更好的是，只需要重现问题所需的代码），但尝试给 parent #sub-menu 元素 position: relative 和 z-index: 2
发布您的完整标记或测试页，以便我们查看。

【解决方案1】：

z-index 仅适用于位置relative、absolute 和fixed。所以，把position:relative 给你的#submenu。像这样写：

#sub-menu {
 position:relative;
 z-index: 1000;
}

【讨论】：

【解决方案2】：

我会推荐尝试 CSS3 Pie。我们开始使用它，许多 IE7 古怪的错误都消失了。

我对 css3pie 在 IE7 中修复的东西感到惊讶。

【讨论】：

【解决方案3】：

您还可以尝试将更高的 z-index 值应用于您的#sub-menu ul 和 li 值。这适用于在 IE7 中给我同样问题的超级鱼菜单。

【讨论】：

【解决方案4】：

使用下面的代码

#sub-menu {
 position:absolute;
 z-index: 1000;
}
#grouped {
left: 100px;
position:relative;
z-index:1;
}

【讨论】：