在IE7中出现了一个奇怪的问题。在多个位置上，我有一个带有position: absolute属性的DIV（伪下拉菜单），当它后面有一个带有position: relative属性的元素时，相对定位的元素会穿过其他DIV显示出来。
相对定位的元素没有设置任何z-index，而绝对定位的元素（我想要在顶部的那个）具有z-index为1000。
1个回答
35
我猜想您已经尝试过了，在相对定位的元素上设置一个比绝对定位元素更低的z-index作为第一个测试。
如果这样不行，您需要确保两个元素在同一个层叠上下文中。在IE中，每当您将position CSS规则应用于元素时，它都会在该元素内部生成一个新的层叠上下文。这意味着只有在该元素的子元素以及其他层叠上下文中具有更低z-index的子元素中，z-index才会被正确地尊重。
在您的情况下，您需要将下拉菜单和按钮放在同一个层叠上下文中或将生成它们各自的层叠上下文的2个元素应用z-index。
- Pat
2
非常准确，那就是问题所在。问题是我不确定是否可以将它们放在同一堆叠索引中。它发生在站点的另一个位置，该位置具有更复杂的布局，并且具有相对定位的元素位于DOM的完全不同级别。我尝试给弹出的项目赋予比其上方项目更低的z-index，但它仍然显示。"或者将z-index应用于生成其单独堆叠上下文的两个元素"是什么意思？ - Louis W
8我的意思是，你必须找到已设置
position属性的2个父元素（它们创建了2个独立的堆叠上下文），并在它们上面设置z-index。例如，如果你的按钮嵌套在一个名为#content的容器中，而下拉菜单在#header中，则可以设置#content { z-index: 1 }和#header { z-index: 2 }。只要#header和#content处于同一堆叠上下文中，这将解决你的问题。 - Pat网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接