IE 下拉 z-index 错误

Posted 2023-03-06

【中文标题】IE 下拉 z-index 错误

【英文标题】：IE dropdown z-index bug

【发布时间】：2011-01-27 22:11:28

【问题描述】：

我在使用 IE（6 和 7）下的下拉菜单时遇到问题。

http://www.amaconsulting.pl/promocje.html

如您所见，下拉菜单隐藏在 IE 的主要内容区域后面。

这是一个已知的错误，一般建议是为标题和内容区域设置 z-index，以便 IE 知道它们的“位置”，在此处的文章中进行了解释：http://bit.ly/coSPcI

我已将 .header div 的 z-index 设置为 20，并将 .featured、.content、.primary、.main 设置为 1，试图找到正确的 div 来解决问题。虽然下拉菜单不再隐藏在 .featured div 后面，但它仍然隐藏在主要内容 div 后面（.primary 或 .main，.secondary 都可以）。

这些 div 的 z-index 设置在单独的样式表中，即 .css，以防有人查找它们。

如果有人可以提供一些建议，我将非常感激。

【问题讨论】：

为什么没有任何答案被接受？ Mike Fitzpatrick 的第二个解决方案对我有用

【参考方案1】：

好的原始解决方案在这里 - Swiss credit website。这可行，但使用了复杂的 z-index 解决方案。 这是非常简单和改进的解决方案 - Jeyjoo stock image gallery 这适用于 IE6+、firefox、opera、safari 和 chrome

解决方案

HTML

<div id="container_page" class="container_page">
  <div id="container_header" class="container_header">
    NAV BAR GOES HERE
  </div>
  <div id="container_body" class="container_body">
    ...body text...
  </div>
</div>

CSS

#container_page #container_header position:relative;z-index:2;
#container_page #container_body position:relative;

为什么会起作用

你必须告诉 IE 这两个 div 是如何相互关联的。

【讨论】：

感谢您的提示！但就我而言，我需要删除容器中的positon:relative...

【参考方案2】：

在 IE 中，如果一个绝对定位的元素有一个 z-index，那么它包含相对定位的元素必须指定一个 z-index (z-index:1) 以便绝对定位的元素能够出现在其他元素的顶部相对定位的元素。

所以我认为你需要给你的 ul.nav 一个 z-index 1。我实际上在my blog 上写过这个。

更新： 因此，如果我将隐藏 ul 的可见性样式更改为可见，只要 ul.nav 具有正 z-index 值，它就会出现在 div 上方。因此，我认为这与您的 JS 从隐藏的 UL 呈现下拉菜单的方式有关。除非我拥有你所有的 HTML/CSS/JS，否则我无法真正解决这个问题，所以我只能为你指明正确的方向，我认为理解 this page 会对你有很大帮助。

【讨论】：

不幸的是，它没有帮助。寻求更多建议，拜托！ dl.getdropbox.com/u/3871932/amaiebug.png

在上面查看我的更新。我仍然认为它与您菜单的相对定位容器有关。

【参考方案3】：

我在子菜单上管理了一个 z-index 工作 - Chkredit - swiss credit website 可在所有版本的 IE 中使用，并且轻巧且 100% CSS（无 javascript）。

IE 没有正确使用 z-index。 检查网站 CSS 代码中的 z-index。您需要在菜单隐藏的项目上放置一个 z-index -1。

我现在正在为自己的图片库解决完全相同的问题（转到“顶部图片”页面）-jeyjoo image gallery。当我解决这个问题时，我会在这里发布完整的解决方案。