1

<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。有人可以发布解决方法吗？

在此先感谢，斯蒂芬

4

3 回答 3

2

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-index。这让人更加头疼。

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

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

您正在寻找使用 css 来打破 html 语法的嵌套规则的解决方案。我提供的示例在遵守这些规则的同时完成了您真正想要的。

于 2009-11-05T16:10:59.957 回答
1

在 8 之前的 IE 版本中存在一个已知的 z-index 错误，其中定位的元素会生成新的堆叠上下文，从而导致 z-index 功能不正确。这个例子说明了这个问题。

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

于 2009-11-05T16:01:19.117 回答
0

不确定我是否很清楚你想要什么但是通过重新排列你的 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>
于 2009-11-05T16:08:07.763 回答