css - 棘手的 : In CSS and HTML, 如果容器的 z-index 为 0，如何使子 DIV 位于容器下方？

Question

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

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

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

我们如何让蓝色方框位于父 DIV 之下？ 注意:如果父 DIV 的 z-index 被移除，那么蓝色的 DIV 将在它下面，但是如果 z-index 没有被移除并保持为 0 会怎么样？ ? 为什么是 z-index的 0或者没有 z-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 }

Answer 1

如果 box1 没有定位，你的否定 z-index 会起作用，否则子框在 child stacking context 中, 并且不能定位在父框之下。

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

Why is a z-index of 0 or no z-index specified make a difference?

这个问题的答案在我链接到的文档中:要创建一个新的堆叠上下文，元素必须被定位并且有一个声明的z-index(或者有opacity 小于 1，这有点奇怪...)。