发布于 由admin

理解 CSS 层叠上下文：解决 `z-index` 混乱的终极指南

理解 CSS 层叠上下文：解决 z-index 混乱的终极指南 (再也不怕被同事问候祖宗十八代了！)

各位前端同仁，有没有经历过这种抓狂的时刻？

你辛辛苦苦写了一堆 CSS，信心满满地以为页面会按照你的设计完美呈现。结果一刷新，啪！一个元素死活盖不住另一个元素，z-index 都写到 9999 了，依然纹丝不动！

这个时候，你开始怀疑人生，怀疑 CSS，甚至开始怀疑是不是电脑出了问题，重启一百遍都解决不了。

别慌，你不是一个人在战斗！这种让人头皮发麻的 “z-index 混乱” 现象，背后隐藏着一个让无数前端工程师又爱又恨的概念：层叠上下文 (Stacking Context)。

今天，我们就来一起扒一扒层叠上下文的底裤，彻底搞懂它，让你从此告别 z-index 混乱的噩梦，成为团队里最靓的仔！（至少在解决 CSS 问题的时候是）

啥是层叠上下文？别吓我，我只是个写 CSS 的！

想象一下，你面前摆着一叠透明的玻璃纸，每一张纸上都画着一些图案。这些玻璃纸叠在一起，就形成了一个立体的画面。

层叠上下文，就类似于这些玻璃纸。它是一个独立的渲染空间，里面的元素会按照一定的规则叠在一起，最终呈现给用户。

每个层叠上下文都有自己的“地盘”，在这个地盘里，元素的 z-index 属性才有效。如果元素不在同一个层叠上下文中，z-index 再高也没用，就像隔着玻璃纸想影响另一叠玻璃纸的图案，根本够不着！

那么问题来了，哪些情况会创建层叠上下文呢？

以下情况会创建一个新的层叠上下文：

  1. 根元素 (<html>): 这是最顶层的层叠上下文，整个页面的所有元素都在它的管辖范围内。
  2. position 值为 relative, absolute, fixed, 或 sticky 并且 z-index 值不为 auto 的元素: 这是最常见的创建层叠上下文的方式。也是导致 z-index 混乱的罪魁祸首之一。
  3. opacity 值小于 1 的元素: 没错，即使是 0.99 也会创建一个新的层叠上下文。
  4. transform 值不为 none 的元素: 比如 transform: translate(10px, 10px) 或 transform: rotate(45deg)。
  5. filter 值不为 none 的元素: 比如 filter: blur(5px)。
  6. isolation: isolate 的元素: 这个属性比较少见，主要用于控制混合模式。
  7. will-change 属性指定了任意的值: will-change 是一个用于优化性能的属性，但也会创建层叠上下文。
  8. contain 属性值为 layout、paint 或 strict 的元素: contain 用于限制元素的渲染范围，提高性能。
  9. mask / mask-image / mask-border 属性不为 none 的元素: 用于创建遮罩效果。
  10. mix-blend-mode 属性不为 normal 的元素: 用于定义元素如何与背景混合。

举个栗子：理解 position 和 z-index 的爱恨情仇

假设我们有以下 HTML 结构：

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

CSS 如下：

.container {
  position: relative; /* 创建层叠上下文 */
  width: 300px;
  height: 200px;
  background-color: lightgray;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.box1 {
  background-color: lightblue;
  top: 50px;
  left: 50px;
  z-index: 1; /* 试图让 Box 1 盖住 Box 2 */
}

.box2 {
  background-color: lightcoral;
  top: 80px;
  left: 80px;
  z-index: 2;
}

在这个例子中，.container 因为 position: relative 和默认的 z-index: auto (等同于 0) 创建了一个层叠上下文。.box1 和 .box2 都是 .container 的子元素，它们都具有 position: absolute 和不同的 z-index 值。

由于 .container 创建了层叠上下文，.box1 和 .box2 的 z-index 值只在 .container 这个层叠上下文中生效。因此，.box2 的 z-index: 2 会让它盖住 .box1 的 z-index: 1。

现在，我们稍微修改一下 CSS，给 .box1 也加上 position: relative 和 z-index: 1：

.box1 {
  position: relative; /* 创建了新的层叠上下文 */
  background-color: lightblue;
  top: 50px;
  left: 50px;
  z-index: 1;
}

这时候，情况就变得复杂了！

.box1 因为 position: relative 和 z-index: 1 也创建了一个新的层叠上下文。这意味着，.box1 里面的元素（在这个例子中没有）会形成一个独立的层叠空间，它们的 z-index 值只在这个空间内生效。

但是，.box1 仍然是 .container 的子元素，它和 .box2 都在 .container 的层叠上下文中。在 .container 的层叠上下文中，.box1 的 z-index 是 1，.box2 的 z-index 是 2。所以，即使 .box1 创建了自己的层叠上下文，它仍然会被 .box2 盖住！

这就是层叠上下文的威力：它会影响 z-index 的作用范围，让你防不胜防。

理清层叠顺序：谁说了算？

在一个层叠上下文中，元素的层叠顺序由以下规则决定（从后往前，后面的会盖住前面的）：

  1. 背景和边框 (Background and Borders): 这是最底层的，元素的背景色和边框。
  2. z-index: auto 的块级元素 (Block-level elements with z-index: auto): 这些元素按照它们在 HTML 中的顺序排列。
  3. z-index: auto 的浮动元素 (Floating elements with z-index: auto): 浮动元素会尽量靠近容器的边缘排列。
  4. z-index: 0 的内联元素/文本 (Inline/Text elements with z-index: 0): 内联元素和文本会按照它们的文本流排列。
  5. position: relative 和 z-index: auto 的元素 (Positioned elements with position: relative and z-index: auto): 这些元素会按照它们在 HTML 中的顺序排列，并且会相对于它们原来的位置偏移。
  6. z-index 为正数的元素 (Elements with positive z-index values): 这些元素会按照 z-index 的值从小到大排列，z-index 值越大，层叠顺序越靠前。

记住：

  • z-index 只能应用于 position 值为 relative, absolute, fixed, 或 sticky 的元素。
  • z-index: auto 的元素不会创建新的层叠上下文。
  • 如果两个元素具有相同的 z-index 值，那么它们会按照它们在 HTML 中的顺序排列。
  • 层叠顺序只在同一个层叠上下文中有效。

如何避免 z-index 混乱？

  1. 尽量减少层叠上下文的数量: 不要滥用 position: relative 和 z-index，除非真的需要。
  2. 合理规划 z-index 的值: 不要随便设置 z-index 为 9999，尽量使用较小的数值，并保持一致性。
  3. 理清元素之间的层级关系: 在写 CSS 之前，先想清楚元素之间的层叠顺序，避免出现意外情况。
  4. 使用 CSS 预处理器: CSS 预处理器（如 Sass 或 Less）可以帮助你更好地管理 z-index 的值，避免重复和冲突。比如可以定义变量，或者使用mixin。
  5. 善用浏览器的开发者工具: 浏览器的开发者工具可以帮助你查看元素的层叠上下文，让你更好地理解元素的层叠顺序。
  6. 实在不行，就用 !important 吧！: （开玩笑的！）不到万不得已，不要使用 !important，它会破坏 CSS 的优先级规则，让你的代码难以维护。

一个常见的错误场景：模态框 (Modal) 被遮挡

很多时候，我们会遇到模态框被其他元素遮挡的问题。这通常是因为模态框的父元素创建了层叠上下文，而模态框的 z-index 值在这个层叠上下文中不够高。

解决方法：

  1. 确保模态框的父元素没有创建层叠上下文: 移除父元素的 position: relative、opacity: 0.99 等属性。
  2. 将模态框直接放到 <body> 元素下: 这样模态框就会处于根元素的层叠上下文中，可以获得最高的层叠优先级。
  3. 给模态框设置足够高的 z-index 值: 确保模态框的 z-index 值高于页面上所有其他元素的 z-index 值。

总结：理解层叠上下文，才能掌控 z-index

层叠上下文是 CSS 中一个重要的概念，理解它才能真正掌控 z-index，避免出现混乱。记住，层叠上下文就像一个个独立的舞台，元素只能在自己的舞台上竞争 z-index 的高低。

希望这篇文章能帮助你彻底搞懂层叠上下文，让你在写 CSS 的时候更加得心应手，再也不怕被 z-index 搞得焦头烂额！下次再遇到 z-index 问题，你就可以自信地说：“哼，区区层叠上下文，看我一眼就把它看穿！”

记住，前端之路漫漫，唯有不断学习，才能成为真正的技术大牛！加油！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注