Question

这是我的示例代码，它在IE7中没有按预期工作 - 我认为位置：相对;是IE7的问题

.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;
}

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都具有999的zindex，因此第二个应该覆盖第一个，尽管zindex结果在浏览器中是不可预测的。实际上你应该设置不同的zindex值来准确控制深度。

Answer 2

在div上设置z-index实际上应该创建一个堆叠上下文，而不是简单地将div应用到另一个上面...所以虽然我认为IE7没有得到它，（惊喜！）

我认为最好通过在oner上设置z-index来创建堆栈开头的oner div，以及第一个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>

.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; 
}

有了这个，绝对定位的孩子根本不需要有一个z-index，因为那些div现在从他们相对定位的父 - IE中获取他们的“z级”并且堆栈可能非常令人困惑！

CSS：

oner

然而，这确实意味着如果你有两个以上，就像在这个例子中你需要设置所有oner div的水平，第一个是最高的...（这就是为什么我把{{如果你有更多的内容，你可能需要更多的类来分隔它们。

相对定位，div堆叠问题即7

2 个答案: