没有 z-index，为什么 DOM 中的早期兄弟会掩盖后来的兄弟? [英] With no z-index, why does an early sibling covers up a later sibling in DOM?

问题描述

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

I have a simple page with 3 DIV's: 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，为什么呢?

I thought that when no element has any z-index defined, that means they are all auto (as shown by the JS in the jsfiddle), so that means the effective z-index is 0, and they would appear in the order of the DOM tree traversal (probably depth first search), meaning that overlay should cover up content1, while content2 should cover up overlay, but as it turns out, overlay covers up both content1 and content2, why is that?

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

(I know I can put a z-index of -1 to overlay and make it go below content1 and content2, but the question is, if no z-index is given, why does overlay cover up both content1 and content2?)

推荐答案

来自 CSS 规范:

在每个堆叠上下文中，以下图层按从后到前的顺序绘制:

Within each stacking context, the following layers are painted in back-to-front order:

1. 构成堆叠上下文的元素的背景和边框.
2. 具有负堆栈级别(最负优先)的子堆栈上下文.
3. 流入的、非内联级别的、非定位的后代.
4. 未定位的浮动.
5. 流入、行内级别、非定位的后代，包括行内表和行内块.
6. 堆栈级别为 0 的子堆栈上下文和堆栈级别为 0 的定位后代.
7. 具有正堆栈级别的子堆栈上下文(最不积极的优先).

这篇关于没有 z-index，为什么 DOM 中的早期兄弟会掩盖后来的兄弟?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！