Css IE中的zIndex问题

---

zIndex问题是Internet Explorer中的一个重要问题。我的问题基本上是，在IE中可以做到以下几点吗？我一直在尝试，但IE一直将

#middle

div放在上方或下方…

您最大的问题是容器

如果你不把你的容器放在一个绝对的位置，或者如果你能把上面的放在容器外面，它可以工作

   <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>

<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>

容器上没有绝对值的示例

   <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>

<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>

容器外部具有ontop的示例

   <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>

<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>

---

问题注释中链接的JSFIDLE已经实现了维护当前文档树结构的正确答案：必须通过“位置：静态”强制容器进入正常流。否则IE假定所有包含的定位元素都基于容器的z索引上下文（反过来，它们的z索引仅作用于容器和容器的子级），基本上就好像容器盒不在正常流中一样，即使容器没有明确定位

没有

位置的问题：静态
连接到容器

附加
位置：静态
，如注释中所链接

第一个在IE9的IE7模式下工作（在chrome中工作良好），第二个在IE9的IE7模式下工作（在chrome中工作）

如果“position:static”不是一个选项，则必须将div移到容器外部，以便它至少与中间div同级，如另一个答案中所示

这是不直观的，因为IE的z索引上下文是基于各种元素在其流/正常流上下文中彼此兄弟的程度，而不是文档结构。
我怀疑任何浏览器都不能做到这一点。你有一个例子可以在一个+1中使用吗？顺便说一句，我假设你不想移动你的html？@Rot@Kyle和thanksWell，我错了。这是可能的。然而，我不认为IE8有问题——即使在怪癖模式下也没问题。