CSS 中的层叠上下文

什么是层叠上下文

层叠上下文即是网页在 Z 轴方向的一个概念，根据这个特性我们可以在页面上通过元素堆叠实现一些效果。比如页面上常见的引导浮层、Modal 对话框用的就是这个特性，如下图中的下拉菜单：

一瞬间我们就想到了 position: relative, position: absolute, z-index 这些属性，没错，通过这些就可以形成层叠上下文，当然了也不仅仅是这些。

那么层叠上下文是如何产生的呢？根据 MDN 里的解释，只要符合以下特征就形成了层叠上下文：

html 根元素自身就会创建一个层叠上下文
position 值为 absolute 或 relative 且 z-index 值不为 auto 的元素
position 值为 fixed 或 sticky 的元素（注意：sticky 在老旧浏览器上不支持）
flex 容器的子元素，且 z-index 值不为 auto
grid 容器的子元素，且 z-index 值不为 auto
opacity 属性值不为 1 的元素
mix-blend-mode 属性不为 normal 的元素
transform 属性值不为 none 的元素
filter 属性值不为 none 的元素
perspective 属性值不为 none 的元素
clip-path 属性值不为 none 的元素
mask / mask-image / mask-border 属性值不为 none 的元素
isolation 属性值为 isolate 的元素
-webkit-overflow-scrolling 属性值为 touch 的元素
will-change 值设定了任一属性而该属性在非初始值（non-initial）时会创建层叠上下文
contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素

看起来很多，其实道理都是一样的，在同一层叠上下文中元素会按照一定的规则进行层叠，比如设置 absolute 的元素会按照 z-index 的大小从上到下依次层叠。当然要比较 z-index 的大小只有在同一个层叠上下文中才有意义。

在同一个层叠上下文中，定位元素会按照 z-index 的大小从上到下进行层叠，如果 z-index 一样，那么后面的元素等级要大于前面的，「后来者居上」。

那么常规流中元素是怎么处理的呢？可以参考下图：

图片来源：https://segmentfault.com/a/11...

另外，不在同一个层叠上下文中的元素，如果要进行层叠顺序处理，一定要注意父元素本身的层叠顺序。