css—堆叠上下文

一、堆叠顺序

如图可分为八层：
负z-index --- background --- border --- block --- float --- inline --- position --- 正z-index
其中只有定位元素加上 z-index 才有效

---

二、堆叠上下文

可以理解为堆叠作用域。我们不用理解什么是堆叠上下文，我们只需要知道什么时候会出现堆叠上下文。

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 "none"的元素，
• mix-blend-mode 属性值不为 "normal"的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 "isolate"的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
• -webkit-overflow-scrolling 属性被设置 "touch"的元素

堆叠上下文就像是css堆叠中的等级制度，html是主管部门，我们可以把z-index 值不为 "auto"的 绝对/相对定位的同级元素看作一些子部门，他的z-index决定他的堆叠顺序。需要注意的是背景和边框是一个部门中的最低级，部门内的所有元素将在他之上。