CSS 的层叠上下文

Question

定义

处于层叠上下文的元素会有一个层叠顺序，它类似于三维里的 z 轴，也就是我们人眼看到屏幕的这一条垂线。

层叠顺序

在 CSS2 的时代，层叠顺序是 background/border -> 负 z-index -> block 块级盒子 -> float 盒子 -> inline 内联盒子 -> z-index 为 auto 或 z-index: 0 -> 正 z-index

当设置 position: relative 或 position: absolute 时，如果 z-index 不为 auto 则会创建层级上下文。另外，层叠上下文是可以嵌套的，很多时候我们发现 z-index 属性不起作用，这个时候就要检查下是不是父级元素的层叠上下文影响到了

CSS3 后，元素的 opacity ，transform 属性也会影响层叠上下文。