html - 在没有 z-index 的情况下，为什么早期的 sibling 会掩盖 DOM 中的后期 sibling ？

Question

我有一个包含 3 个 DIV 的简单页面:http://jsfiddle.net/AxX29/32/

使用 HTML:

<div id="content1">foo</div>

<div id="overlay"></div>

<div id="content2">bar</div>

和 CSS:

#overlay { width: 160px; height: 160px; background:yellow; 
           position: absolute; top:0; left: 0 }

我认为当没有元素定义任何 z-index 时，这意味着它们都是 auto (如 jsfiddle 中的 JS 所示)，所以这意味着有效的z-index是0，它们会按照DOM树遍历的顺序出现(可能是深度优先搜索)，也就是说overlay 应该覆盖 content1，而 content2 应该覆盖 overlay，但事实证明，overlay 覆盖了content1 和 content2，这是为什么呢？

(我知道我可以将 -1 的 z-index 放在 overlay 上，并使其低于 content1 和 content2，但问题是，如果没有给出 z-index，为什么 overlay 会同时覆盖 content1 和 content2?)

Answer 1

给一个元素 position: absolute; 将它从正常的文档流中移除并将它放在其他元素之上。

您可以将 position: relative; 添加到父级 div 以使绝对定位元素相对于父级绝对定位，而不是绝对相对于整个文档定位。

编辑:正如您提到的，您已经知道，将 z-index 应用于 positioned 元素将改变它们的深度行为(堆栈上下文，技术上称为)；应用 z-index: 100; position: absolute; 到你的第一个元素，例如，将它放在 position: absolute; 元素之上。