层叠上下文

层叠上下文（ Stacking Context ），是用来描述页面中元素在垂直于屏幕方向排列规则而创建出的模型。 层叠上下文中重叠的元素按照一定的规则在垂直方向排列。

产生条件

• 根元素 （html 元素）
• 定位元素
  • relative、absolute（z-index 不为 auto）
  • fixed、sticky
• CSS3 属性
  • opacity 属性值小于 1
  • flex 容器的子元素（z-index 不为 auto）
  • grid 容器的子元素（z-index 不为 auto）
  • transform、filter、perspective、clip-path、 mask、mask-image、mask-border 属性值不为 none
  • 等等

层叠水平

决定了在同一个层叠上下文中，元素在 z 轴上的显示顺序，就像桌子上纸张的顺序、信封里信纸的顺序。

层叠顺序

层叠水平只是一个概念，那么我们根据什么来判定元素的层叠水平呢？那就是层叠顺序。

在同一层叠上下文中，层叠顺序自下而上依次是：层叠上下文的根、z-index 为负、block 、float 、inline/inline-block 、z-index 为 0 或 auto 、z-index 为正。

TIP

为什么 inline/inline-block 元素的层叠顺序要高于 block 和 float 元素？ 因为块级和浮动元素一般都用作布局，而内联元素都是内容。一个网页中最重要的就是内容，所以一定要让内容的层叠顺序相当高，这样可以在发生层叠时，重要的图片、文字内容可以优先暴露在屏幕上。

层叠准则

• 同一层叠上下文中的元素，按照层叠顺序排列
• 不同层叠上下文中的元素，按层叠水平进行整体排列
• 层叠水平与层叠顺序都相同，在 DOM 流中处于后面的元素会覆盖前面的元素

参考

• CSS 层叠顺序知多少
• 深入理解 CSS 中的层叠上下文和层叠顺序