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...

另外，不在同一个层叠上下文中的元素，若是要进行层叠顺序处理，必定要注意父元素自己的层叠顺序。

相关参考

• The stacking context - CSS: Cascading Style Sheets | MDN
• 深刻理解CSS中的层叠上下文和层叠顺序