css - IE 中的 zIndex 问题

Question

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

Answer 1

这里最大的问题是容器。

如果你不把你的容器放在一个绝对位置，或者如果你可以把 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>

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>