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>

不需要带有荒谬数字的ziindexes - 这会导致混乱。

基本上，当你使用z-index时，你应该定位所有兄弟元素和父元素，为了清楚起见，你应该对所有兄弟姐妹进行z索引。这让人头疼。

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

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

您正在寻找一种使用css来破解html语法的嵌套规则的解决方案。我提供的例子在遵守这些规则的同时实现了你真正想要的东西。

Answer 2

在8之前的IE版本中存在已知的z-index错误，其中定位元素生成新的堆叠上下文，导致z-index无法正常工作。 This example说明了问题。

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

Answer 3

不确定我是否非常清楚你想要什么，但是你的代码以及它在Firefox 3中呈现的方式可以通过重新安排你的div来在IE7中复制

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

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

3 个答案: