深入理解CSS中的z-index层叠上下文 - 智猿学院-IT界的百科全书

好的，咱们今天来聊聊 CSS 里一个挺有意思的家伙：z-index。别看它名字简简单单，好像就是个“数值越大就越靠前”的玩意儿，但用起来，嘿，一不小心就能让你抓耳挠腮，怀疑人生。今天，咱们就来好好扒一扒 z-index 的底裤，看看它到底是个什么妖孽，以及怎么才能把它驯服得服服帖帖。

故事的开端：层叠的世界

想象一下，你面前摆着一堆透明的玻璃纸，上面都画着不同的图案。你想把它们叠起来，让某些图案显示在最上面，某些图案藏在下面。这就是 CSS 层叠的本质：浏览器要把页面上的元素按照一定的规则叠起来，决定谁盖住谁。

默认情况下，元素会按照它们在 HTML 代码中出现的顺序来叠放，后出现的元素会盖在先出现的元素上面。这就像你随手把玻璃纸一张张叠上去一样。但有时候，我们希望打破这种默认的秩序，让某个元素“突出重围”，跑到最前面来。这时候，z-index 就该闪亮登场了。

z-index：操控层叠的利器

z-index 属性可以控制元素在 z 轴上的位置，也就是控制元素在层叠顺序中的前后关系。它的取值是一个整数，可以是正数、负数或者零。数值越大，元素就越靠前，数值越小，元素就越靠后。

举个例子：

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

.box {
  width: 200px;
  height: 200px;
  position: absolute; /* 必须是定位元素 */
}

.box1 {
  background-color: lightblue;
  z-index: 1;
}

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

在这个例子中，我们给两个 div 元素设置了 position: absolute，让它们脱离了文档流，可以自由地定位。然后，我们给 box1 设置了 z-index: 1，给 box2 设置了 z-index: 2。结果就是，box2 会盖在 box1 上面，因为它 z-index 的值更大。

等等，事情没那么简单：层叠上下文的出现

如果你以为 z-index 就是简单地比较数值大小，那你就太天真了！在 CSS 的世界里，还存在着一个叫做“层叠上下文 (stacking context)”的概念。这个概念就像是一个个独立的“小宇宙”，每个“小宇宙”里的元素都有自己的层叠顺序，互不干扰。

你可以把层叠上下文想象成一个个透明的盒子。盒子里的元素只能在盒子内部进行层叠，盒子之间的层叠顺序则由它们的父元素的 z-index 决定。

哪些元素会创建层叠上下文？

以下是一些常见的会创建层叠上下文的元素：

根元素 (<html>)：这是最顶层的层叠上下文，整个页面的所有元素都在它的管辖之下。
position 值为 absolute 或 relative，且 z-index 值不为 auto 的元素：这是最常见的情况。只要你给一个定位元素设置了 z-index，它就会创建一个新的层叠上下文。
position 值为 fixed 或 sticky 的元素：它们也会创建新的层叠上下文。
opacity 值小于 1 的元素：即使 opacity 是 0.99，也会创建一个新的层叠上下文。
transform 值不为 none 的元素：比如 transform: translate(10px, 10px)。
filter 值不为 none 的元素：比如 filter: blur(5px)。
isolation 值为 isolate 的元素：这个属性比较少见，但也可以强制创建一个新的层叠上下文。
will-change 指定了任意 CSS 属性（除了 top, left, bottom 或 right）的元素： will-change 是一种性能优化手段，但它也会创建新的层叠上下文。
contain 值为 layout、paint 或 strict 的元素： contain 属性用于控制元素的渲染范围，也可以创建新的层叠上下文。
mix-blend-mode 值不为 normal 的元素：用于定义元素如何与背景混合，也会创建新的层叠上下文。

层叠上下文的影响：z-index 的相对性

层叠上下文的存在，使得 z-index 的作用范围变得相对化。也就是说，一个元素的 z-index 值只在它所在的层叠上下文中有效。如果两个元素不在同一个层叠上下文中，它们的 z-index 值就没有可比性。

举个例子：

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

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

.container2 {
  width: 300px;
  height: 300px;
  background-color: lightgreen;
  position: relative;
  top: -100px; /* 让 container2 和 container1 重叠 */
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.box1 {
  background-color: lightblue;
  z-index: 100; /* 在 container1 的层叠上下文中 */
}

.box2 {
  background-color: lightcoral;
  z-index: 1; /* 在 container2 的层叠上下文中 */
}

在这个例子中，container1 和 container2 都创建了新的层叠上下文。虽然 box1 的 z-index 值是 100，而 box2 的 z-index 值是 1，但 box1 仍然会盖在 box2 上面。这是因为 container1 的 z-index 值大于 container2 的 z-index 值，所以 container1 整个盒子都盖在了 container2 上面，盒子里的元素自然也跟着盖上去了。

层叠顺序：谁说了算？

在同一个层叠上下文中，元素的层叠顺序由以下规则决定（从后往前，越靠后的规则优先级越高）：

背景和边框 (background and borders)：元素的背景和边框永远在最下面。
负 z-index 值的定位元素 (positioned elements with negative z-index values)：这些元素会排在背景和边框的上面，但只能在自己的层叠上下文中起作用。
非定位元素 (non-positioned elements)：指的是 position 值为 static 的元素。它们会按照在 HTML 代码中出现的顺序来叠放。
未设置 z-index 值的定位元素 (positioned elements with z-index: auto)：它们也会按照在 HTML 代码中出现的顺序来叠放。
正 z-index 值的定位元素 (positioned elements with positive z-index values)：这些元素会排在最上面，z-index 值越大，就越靠前。

z-index: auto 的特殊性

z-index: auto 是一个特殊的值。它表示元素不会创建新的层叠上下文，并且它的层叠顺序由父元素的层叠上下文决定。也就是说，z-index: auto 的元素会继承父元素的层叠顺序。

驯服 z-index 的秘诀

理解层叠上下文：这是最重要的一点。只有理解了层叠上下文的概念，才能真正掌握 z-index 的用法。
尽量避免滥用 z-index：过多的 z-index 会让代码变得难以维护，也容易出错。尽量使用默认的层叠顺序，只有在必要的时候才使用 z-index。
保持 z-index 值的清晰和一致：尽量使用有意义的 z-index 值，比如 10、20、30，而不是随意地使用 1、2、3。这样可以更容易地理解和维护代码。
使用 CSS 变量来管理 z-index 值：可以把常用的 z-index 值定义成 CSS 变量，方便统一管理和修改。

总结

z-index 是一个强大而灵活的 CSS 属性，可以用来控制元素的层叠顺序。但它也需要谨慎使用，才能避免出现意想不到的问题。记住，理解层叠上下文是掌握 z-index 的关键。只要掌握了层叠上下文的概念，就能轻松驯服 z-index 这匹野马，让它为你所用！

希望这篇文章能够帮助你更深入地理解 CSS 中的 z-index 层叠上下文。记住，实践是检验真理的唯一标准。多写代码，多尝试，你一定能成为 z-index 的大师！

发表回复 取消回复

发表回复取消回复