1

这可能是一个更高级的 CSS 问题z-index：

您可以在http://jsfiddle.net/cPdge/6/中看到它

使用当前的 Firefox、Chrome、Safari 或 IE 9，您应该会看到父 DIV 顶部的蓝色 DIV。

我们如何使蓝色框位于父 DIV 下方？ 注意：如果父 DIV 的 z-index 被删除，那么蓝色 DIV 会在它下面，但是如果 z-index 没有被删除并保持为0呢？ 为什么 a z-indexof0或 noz-index会有所不同？通常，没有指定与 相同0。

该页面中的代码是：

    <div id="box1">
        some content
        <div id="subbox1">blue
        </div>
        <div id="subbox2">orange
        </div>
    </div>​

和 CSS：

#box1 { width: 600px; height: 400px; border: 6px dashed orange; 
  position: absolute; top: 100px; left: 100px; background: #ffe; z-index: 0 }

#subbox1 { width: 300px; height: 200px; border: 6px dashed orange; 
  position: absolute; top: 310px; left: 100px; background: #eff; z-index: -10000 }

#subbox2 { width: 300px; height: 200px; border: 6px dashed orange; 
  position: absolute; top: 210px; left: 200px; background: #fc9; z-index: 2000 }
4

1 回答 1

2

如果没有定位，您的否定z-index将起作用，否则子框位于子堆叠上下文中，并且不能定位在父框下方。box1

http://jsfiddle.net/cPdge/7/

为什么 z-index 为 0 或没有指定 z-index 会有所不同？

在我链接到的文档中对此的答案是：要创建一个新的堆叠上下文，元素必须既定位又声明z-index（或opacity小于 1，这有点奇怪......）。

于 2012-05-19T17:11:00.247 回答