堆叠上下文——笔记

文档中的层叠上下文由满足以下任意一个条件的元素形成：

• 根元素 (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 属性，即便你没有直接指定这些属性的值

• -webkit-overflow-scrolling 属性被设置 "touch"的元素

堆叠上下文顺序

1. background
   2.border
   3.块级元素
   4.浮动
   5.内联元素
   6.z-index：0；
   7.z-index：+；

以上就是堆叠上下文的顺序。值得注意的是，如果是兄弟元素重叠，那么后面的元素会覆盖前面的元素。