z IE中的索引问题

Question

zIndex问题在Internet Explorer中是common problem。我的问题基本上是，可以在IE中完成以下操作吗？我一直在尝试，但IE继续将#middle div放在上面或下面......

Answer 1

这里最大的问题是容器。

如果您没有将容器放在绝对位置，或者您可以将容器放在容器外面，它可以工作

容器上没有绝对的示例

   <div id="container" style="width:300px; height:300px; background-color:#CCC;">
    <div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;"></div>
    <div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>    
</div>
    <div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>

容器外面的ontop示例

<div id="container" style="width:300px; height:300px; background-color:#CCC; top:0; left:0;position:absolute;  z-index:1;">
    <div id="below" style="width:200px; height:200px; background-color:#C00; top:0; left:0; position:absolute; z-index:2;">
    </div>
</div>
<div id="ontop" style="width:100px; height:100px; background-color:#03F; top:0; left:0; position:absolute; z-index:4;"></div>
<div id="middle" style="width:150px; height:150px; background-color:#0F9; top:0; left:0; position:absolute; z-index:3;"></div>

Answer 2

在问题的评论中链接的jsfiddle已经实现了维护当前文档树结构的正确答案：必须通过'position：static'强制容器进入正常流程。否则，IE假设所有包含的定位元素都基于容器的z-index的上下文（反过来它们的z-indexing仅相对于容器和容器的子元素），基本上好像容器盒不在正常情况下流，即使容器没有明确定位。

Here is a jsfiddle没有position: static附加到容器的问题。

附加position: static的

Here is the jsfiddle，已在评论中链接。

IE9中IE7模式中的第一个中断（在chrome中工作正常），第二个在IE9中以IE7模式工作（并且在chrome中工作）。

如果'position：static'不是一个选项，你必须将div移到容器之外，这样它至少是中间div的兄弟，如另一个答案所示。

这是非直观的，因为IE的z-index上下文是基于各个元素在上下文中与其流/正常流相互兄弟的程度，而不是文档结构。