在Internet Explorer 7中使用z-Index定位div

Question

<div style="position:relative;"> OUTERFOO <div style="position:absolute; z-index:1000;">FOO</div></div> <div style="position:relative;">OUTERBAR <div style="position:absolute;">BAR</div> </div>

我希望FOO堆叠在BAR上而OUTERFOO堆叠在OUTERBAR之上！

这在Firefox中有效，但在IE7中无效。 有人可以发布解决方法吗？

预先感谢，斯蒂芬

Answer 1

W3C在没有创建实现的情况下定义了一个标准的事实导致了不同的解释，而不管它是“对还是错”的浏览器。

在所有浏览器中执行所需操作的正确方法是：

<div style="position:relative; z-index:1;"> OUTERFOO 
  <div style="position:relative; z-index:1;">OUTERBAR 
    <div style="position:absolute; z-index:1;">BAR</div> 
  </div>
  <div style="position:absolute; z-index:2;">FOO</div>
</div> 

要么

<div style="position:relative; z-index:1;"> OUTERFOO 
  <div style="position:relative; z-index:1;">OUTERBAR 
    <div style="position:absolute; z-index:1;">BAR</div> 
    <div style="position:absolute; z-index:2;">FOO</div>
  </div>
</div> 

不需要具有可笑数字的ziindex-会导致混乱。

基本上，当您使用z-index时，应该放置所有同级元素和父元素，并且为了清楚起见，应该对所有同级元素进行z-index。 这使更多的头痛。

您在问题中尝试执行此操作的方式违反了分层的基本规则，例如：

<div><span></div></span>

您正在寻找一种使用css打破html语法的嵌套规则的解决方案。 我提供的示例可以在遵循这些规则的同时满足您的实际需求。

Answer 2

IE 8之前的版本中存在一个已知的z-index错误，其中定位的元素会生成新的堆叠上下文，从而导致z-index无法正常运行。 本示例说明了该问题。

您的页面在IE8中是否正确显示？

Answer 3

不知道我是否很清楚您想要什么，但是可以通过重新排列div如下来在IE7中复制代码以及如何在Firefox 3中呈现代码

<div style="position:relative; z-index:2;">OUTERFOO</div>
<div style="position:absolute; z-index:1">
   <div style="position:absolute; z-index:1000;">FOO</div>
      OUTERBAR
      <div style="position: relative; z-index: 1;">BAR</div>
   </div>
</div>