本博客主要讲CSS的堆叠顺序以及什么是堆叠上下文和堆叠上下文的作用。
堆叠上下文
导读
1.什么是堆叠顺序
2.什么是堆叠上下文
堆叠顺序
堆叠上下文
- z-index: -
- background
- border
- 块级
- 浮动
- 内联
- z-index: 0
- z-index: +
如果是兄弟元素重叠，那么后面的盖在前面的身上，很好理解。
但是z-index: -的时候却不一定是在层叠顺序的最下面，原因就是堆叠上下文。
堆叠上下文
堆叠上下文是一种抽象的概念，可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。
- 这是MDN关于堆叠上下文描述的链接
- 以下是满足堆叠上下文的实现条件
- 根元素 (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元素死活降不到最底层的原因 - 一旦成员有了一个部门(层叠上下文)，那就不能越过部门直接去降到最底层，原因如上条。
网友评论