html - IE6 和 IE7 绝对定位的 div 在多个相对 div 之上

Question

是否可以在 IE6 和 IE7 中使多个绝对定位的 div 与多个相对定位的 div 重叠？

有关更多信息，请参阅此 jsFiddle: http://jsfiddle.net/btker/1/

HTML

<div class="wrapper">
    <div class="relative_div">Relative div.
        <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
    </div>
</div>

<div class="wrapper">
    <div class="relative_div">Relative div.
        <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
    </div>
</div>

CSS

.wrapper{
height: 100%;
width: 100%;
}

.relative_div {
    height: 75px;
    width: 200px;
    border: 1px solid #000;
    padding: 10px;
    background: #e6e6e6;
    margin: 0 0 35px 0;
    position: relative;
}
.absolute_div {
    height: 100px;
    width: 250px;
    border: 1px solid #000;
    background: #c6c6c6;
    padding: 10px;
    position: absolute;
    top: 40px;
    left: 100px;
    z-index: 100;
}

有两个相对的 <div>(放置在相同的包装器中)，每个都包含一个与所有相对的 <div> 重叠的绝对 <div>。这在 Chrome、Firefox 等的更新版本中工作得很好，绝对 <div> 和 z-index 总是放在最上面。

在 IE6 和 IE7 中这不起作用。此问题与标准“标题中的下拉菜单在页面内容后面显示其菜单”之间的不同之处在于，在那些情况下，它通常通过为该特定菜单的父元素提供其他 z-index 等来解决。在这种情况下，两者都是绝对值 <div> s 放在相同的 <div> s 中。

是否可以解决此问题，使绝对 <div> 始终位于 IE6 和 IE7 中所有相对 <div> 之上？ IE 的条件注释可用于使解决方案跨浏览器。

Answer 1

这是可能的，但只能通过减少 z-index第二个.wrapper或增加 z-index第一个 .wrapper .

在简单的层面上，每个定位元素都带有一个非自动 z-index创建一个新的堆栈上下文，尽管在其他情况下会创建一个新的堆栈上下文 - 参见 The stacking context .

问题是影响 IE <= 7 的问题, 来自 quirksmode.org

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.

CSS

.wrapper{
    height: 100%;
    width: 100%;
}

.lower {
    position: relative;
    z-index: -1;
}

.higher {
    position: relative;
    z-index: 2;
}

.relative_div {
    height: 75px;
    width: 200px;
    border: 1px solid #000;
    padding: 10px;
    background: #e6e6e6;
    margin: 0 0 35px 0;
    position: relative;

}
.absolute_div {
    height: 100px;
    width: 250px;
    border: 1px solid #000;
    background: #c6c6c6;
    padding: 10px;
    position: absolute;
    top: 40px;
    left: 100px;
    z-index: 1;
}

HTML

<div class="wrapper"> <!-- add higher class here -->
  <div class="relative_div">Relative div.
      <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
  </div>
</div>
<div class="wrapper"> <!-- or add lower class here -->
  <div class="relative_div">Relative div.
      <div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
  </div>
</div>