Question

**这个问题是赏金的，因为以下答案没有解决问题。

我在IE7中调试一个页面并遇到了一个问题。将鼠标悬停在导航链接上时，下拉列表会低于其下方的幻灯片。下拉ul绝对定位为z-index为10，滑块相对于其父级定位，z-index为1. #slider中的某些内容导致菜单落后于它。

查看

我使用jquery来改变#slider：

的每个孩子的z索引

$(function() {
      $('.jFlowSlideContainer').css('z-index', '1');
        })
      $(function() {
          $('#jFlowSlide').css('z-index', '1');
        })
      $(function() {
          $('#slides').css('z-index', '1');
        })

但是，在IE7中，子菜单位于滑块后面。也许问题出在菜单脚本中？

Answer 1

问题在于stacking contexts。基本上，您在其上设置z-index（为9）的#menu li元素与#slider元素（您已将z-index设置为1）放在同一堆栈上下文中。一个快速的解决方案是将#header元素的z-index设置为2，但我建议您阅读堆叠上下文。

Answer 2

尝试给出ul或li高度：auto。没有看到代码就很难分辨。

Answer 3

你似乎有几个问题。我取出了<div id='slider'> ... </div>之间的所有内容，并用虚拟文本填充它，所以我可以看到菜单是否超过或低于。它还在继续。我查看了style.css中#slider的规则，并删除了position：rule，以获得以下内容：

#slider {
Z-INDEX: 1 !important; FLOAT: left; WIDTH: 960px; HEIGHT: 296px;
}

这似乎使它成功。然后我重新添加了滑块内容，它又被打破了。 = \

Answer 4

position:relative;
float:left;
height:296px;
z-index:1!important;

到z-index存在位置需要是“绝对”而显示“块”

position:absolute;
display:block;
z-index:1!important;

问候

IE7上的Z-index问题

4 个答案: