HTML、CSS、z-index

Question

我无法理解 z-index，如果你看一下这个 fiddle你可能会看到 div 后面有一个隐藏的 span。

我了解到所有元素都有z-index: 'auto'; 这表示它们从父元素继承了 z-index，唯一具有 z-index 的元素是 html具有 z-index: 0; 的元素，所以如果我刚才说的是真的，所有元素(with position absolute, fixed, relative)默认都应该有 z-index: 'auto'; 这基本上是 z-index: 0;。

现在，如果您看一下这个 fiddle我为 div 元素设置了 z-index: 0; 令我惊讶的是，跨度不再隐藏，我很惊讶，因为 div 的默认 z-index应该是 0 并且 div 应该隐藏跨度。

所以我的问题是为什么当我为 div 元素设置 z-index: 0; 时，跨度不再隐藏，我的意思是跨度应该保持隐藏没有？

Answer 1

希望这会有所帮助。

默认值:auto

规范中有关于默认值auto的说明:

The stack level of the generated box in the current stacking context is the same as its parent's box.The box does not establish a new local stacking context.(CSS2.1:9.9.1)

这意味着:您可以将任何具有 z-index:auto 的元素视为 z-index:0。但是区别是z-index:auto不会建立堆叠上下文，但后者会。

您可能将短语“堆叠上下文”理解为由 z-index 不是 auto 的元素建立的新包含 block 。

具体看你的问题:

1)span{z-index:-1} div 没有明确的 z-index，实际上现在 div{z-index:auto}

根据堆叠规则，div 不会建立新的堆叠上下文，因此其子元素与 body 元素放置在相同的堆叠上下文中。换句话说，span 在 body 元素后面。

2)span{z-index:-1} & div{z-index:0;}

在这种情况下，span 是 div 建立的堆栈上下文的一部分，不再是初始包含 block 的堆栈上下文。记住这一点。因此，span 永远不会堆叠在其堆叠上下文的背景之下，正如您的第二个 fiddle 所示。

附言CSS2.1之前的堆叠规则不是这样的。 ;-)