相对定位，ie 7中的div堆叠问题

Question

这是我的示例代码，它在 IE7 中没有按预期工作 - 我认为position:relative; 的问题是

.oner {
  position:relative;
  height:50px;
  background:#fff;
  border:5px solid #e4e4e4;
  height:200px;
  margin-top:20px;
}

.onea {
  position:absolute;
  height:500px;
  right:0;
  width:200px;
  background: #eee; 
  z-index:999;
}

.onet {
  position:absolute;
  height:500px;
  left:0;
  width:200px;
  background:red; 
  z-index:999;
}

IE7 HTML

<div style="height:500px;width:900px;margin:auto;">
    <div class="oner">
        <div class="onea">IE IE7 this div goes behind the "oner" div below </div>
    </div>
    <div class="oner">
        <div class="onet">My name is Sumit Kumar Ray my email is ..</div>
    </div>
</div>

： onea div 位于以下 oner div 后面，但在其他浏览器中它会覆盖它

Answer 1

在 div 上设置 z-index 实际上应该创建一个堆叠上下文，而不是简单地引入 div，它会应用于另一个之上......所以虽然我确实认为 IE7 并没有完全理解它是的，（惊讶！）

我认为最好通过设置 z-index 来使 oner div 成为创建堆栈开头的 div，并且你首先想要什么oner 具有比第二个更高的 z-index ，

<div style="height:500px;width:900px;margin:auto;">
    <div class="oner" style="z-index: 1;">
        <div class="onea">IE IE7 this div goes behind the "oner" div below </div>
    </div>
    <div class="oner">
        <div class="onet">My name is Sumit Kumar Ray my email is ..</div>
    </div>
</div>

因此绝对定位子项根本不需要具有 z-index，因为这些 div 现在采用它们的“z 层”来自其相对定位的父级 - IE 和堆栈可能会非常混乱！

CSS：

.oner {
  position:relative;
  height:50px;
  background:#fff;
  border:5px solid #e4e4e4;
  height:200px;
  margin-top:20px;
}

.onea {
  position:absolute;
  height:500px;
  right:0;
  width:200px;
  background: #eee; 
}

.onet {
  position:absolute;
  height:500px;
  left:0;
  width:200px;
  background:red; 
}

然而，这确实意味着，如果您有两个以上的 div，如本示例所示，您需要在所有 oner div 上设置级别，第一个是最高的。（这就是为什么我将HTML 中内联的 oner 样式（如果您有更多样式，您可能需要更多的类来分隔它们）

Answer 2

由于两个内部 div 的 zindex 均为 999，因此第二个 div 应该覆盖第一个，尽管 zindex 结果在浏览器中可能无法预测。实际上，您应该设置不同的 zindex 值来准确控制深度。