Suckerfish Menu IE6 之子 - 隐藏在内容后面的菜单答案

【问题标题】：Son of Suckerfish Menu IE6 - menu hiding behind contentSuckerfish Menu IE6 之子 - 隐藏在内容后面的菜单
【发布时间】：2009-12-04 05:21:00
【问题描述】：

页面 - http://blu-eye.com/index.html - 包含在站点的其余部分正确显示的吸盘鱼菜单，但此页面除外。菜单项隐藏在下面的内容后面。

它下面的内容包含一个带有图像和文本的 javascript 滑块。我已经尝试更改大多数元素的 z-indexes，但仍然没有运气。

它只出现在 IE（6 和 7）中。

请帮忙！

【问题讨论】：

z-index 应该有帮助，哪些元素/如何设置它们？

标签： javascript css internet-explorer suckerfish

【解决方案1】：

你所拥有的戏剧是使用相对定位的元素，它重置了

特别是在 div#header 上，移除相对位置。然后在 div#cat_528463_divs > ul > li 上设置一个 z-index（例如 1000）。这将解决隐藏在 JS 滑块下的导航问题 - 但是它会破坏顶部其余部分的外观，因为它们绝对定位徽标和其他一些图像。所以这需要重建。

【讨论】：

【解决方案2】：

IE 的元素堆叠顺序略有不同，因此仅设置具有不同 z-index 的内容不一定会将其移到上方。

将您的起点作为您的包装，添加 position:relative 到它，然后进入您的 HTML。如果你想象在你的起点，那么你需要让你的菜单 div 和你的滑块 div 至少具有相同的“深度”。

您可能会发现添加 position:relative to #content 也可能会有所帮助。

然后您可以更改 z-indexes。

【讨论】：

【解决方案3】：

将z-index:100添加到子菜单的li's

#nav_528463 li ul li {
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  background:transparent none repeat scroll 0 0;
  float:none;
  margin:0;
  padding:0;
  z-index:100
}

【讨论】：

【解决方案4】：

我发现这个 jQuery 对你的问题非常有用：

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

【讨论】：