层叠上下文与层叠顺序

层叠顺序

在css2.1时代, 堆叠顺序遵循下面这张图.

图片来自这里

层叠上下文

满足一下条件的任意元素就会形成堆叠上下文.

• 根元素 (HTML)
• z-index 值不为 auto的 绝对/相对定位
• 一个 z-index 值不为 auto的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex
• opacity 属性值小于1 的元素
• transform 属性值不为 none的元素
• mix-blend-mode 属性值不为 normal的元素
• filter值不为none的元素
• perspective值不为none的元素
• isolation 属性被设置为 isolate的元素
• position: fixed
• 在 will-change 中指定了任意 CSS属性.

参考:
The stacking context