CSS深入浅出-堆叠上下文

本博客主要讲CSS的堆叠顺序以及什么是堆叠上下文和堆叠上下文的作用。

堆叠上下文

导读

1.什么是堆叠顺序
2.什么是堆叠上下文

点击此链接

堆叠顺序

堆叠上下文

1. z-index: -
2. background
3. border
4. 块级
5. 浮动
6. 内联
7. z-index: 0
8. z-index: +

如果是兄弟元素重叠，那么后面的盖在前面的身上，很好理解。
但是z-index: -的时候却不一定是在层叠顺序的最下面，原因就是堆叠上下文。

堆叠上下文

堆叠上下文是一种抽象的概念，可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。

1. 这是MDN关于堆叠上下文描述的链接
2. 以下是满足堆叠上下文的实现条件

• 根元素 (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"的元素

只有在满足堆叠上下文的条件下，z-index的值才会起作用！！！

堆叠上下文的作用

• 堆叠上下文会影响z-index的层级
• 每一个堆叠上下文都像一个部门，z-index的值相当于部门(层叠上下文)的等级，z-index高的部门就算是等级最低的员工也比z-index低的最高级的员工等级要高。这也是有些CSS元素死活降不到最底层的原因
• 一旦成员有了一个部门(层叠上下文)，那就不能越过部门直接去降到最底层，原因如上条。