css - 下拉菜单隐藏在 IE 中的其他元素后面

Question

我在我的一个元素中安装了来自 site5 的 Boldy 主题，但遇到了一个主要问题。

在 Internet Explorer(8 或更低版本)中浏览时，顶部下拉菜单显示在其他一些元素(主要内容 slider 、H1 等)后面。我已经尝试了所有方法，从更改所有z-index 到固定位置，没有运气。

您可以通过访问 site5 的 Boldy 演示页面查看问题 http://wordpress.site5.net/boldy/并将鼠标悬停在 IE 中顶部菜单的博客选项卡上。

我已经让 site5 调查了，他们知道这个问题，但没有找到任何解决方案。

Answer 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 是如何相互关联的。