我无法理解 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;
时,跨度不再隐藏,我的意思是跨度应该保持隐藏没有?
最佳答案
希望这会有所帮助。
默认值: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之前的堆叠规则不是这样的。 ;-)
关于HTML、CSS、z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23583936/