CSS z-index 语法
在 CSS 中，z-index 属性用于定义元素的堆叠顺序。
语法：
z-index: 整数值;说明：
z-index 的取值是一个整数值（可以是正数、负数或零），该值表示元素在当前堆叠上下文中的堆叠级别。z-index 的数值越大，元素越靠 “上” 显示（视觉上层级越高）。
理解 z-index 的关键，在于搞清楚 “堆叠上下文” 这个概念。所谓的 “堆叠上下文”，你可以把它理解成一个 “独立的小图层空间”，在这个空间中，元素之间才会互相比较 z-index 的大小。不同堆叠上下文之间的 z-index 是无法直接比较的！
常见的会创建堆叠上下文的情况，有以下几种：
- 页面根元素（<html>）。
- 设置了 z-index 且 position 不是 static 的元素。
- 设置了以下属性之一的元素：
- opacity < 1。
- transform、filter、perspective、clip-path、mask 等属性不为 none。
- will-change 显式指定了上述属性。
- contain: layout、content 或 strict。
在同一个堆叠上下文中，元素的显示顺序遵循以下优先级（从下往上）：
- 第 1 级（最底层）： 堆叠上下文根元素的背景和边框。
- 第 2 级： z-index 为负值的定位元素（或 Flex/Grid 子元素）。
- 第 3 级： 普通文档流中的块级元素（Block）。
- 第 4 级： 浮动元素（Float）。
- 第 5 级： 普通文档流中的行内元素（Inline / Inline-block）。
- 第 6 级： z-index 为 auto 或 0 的定位元素（或 Flex/Grid 子元素），以及 opacity、transform 等属性创建的层叠上下文。
- 第 7 级（最顶层）： z-index 为正值的定位元素（或 Flex/Grid 子元素）。
简单来说，小伙伴们记住以下几点就够了。
- z-index 属性一般只对 “已定位元素”（即 position 不为 static）有效。
- z-index 控制元素的层级高低，值越大越 “上面” 。
- 真正控制显示顺序的是 “堆叠上下文” 。
- 不同堆叠上下文之间，不能直接通过 z-index 比较大小。
注意: z-index 属性只对 position 属性设置为 relative、absolute、fixed 或 sticky 的元素有效。对于 position: static; 的元素，z-index 是无效的。
CSS z-index 摘要
| 属于 | CSS 定位 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS z-index 示例
接下来，我们通过几个简单的例子来讲解一下 CSS z-index 属性是如何使用的。
示例 1：z-index 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
position: absolute; /* 必须为非 static 定位 */
width: 200px;
height: 200px;
}
.box1 {
background-color: lightskyblue;
top: 30px;
left: 30px;
z-index: 1; /* 堆叠级别：1 */
}
.box2 {
background-color: lightseagreen;
top: 60px;
left: 60px;
z-index: 2; /* 堆叠级别：2，更高 */
}
.box3 {
background-color: lightcoral;
top: 90px;
left: 90px;
z-index: 0; /* 堆叠级别：0 */
}
</style>
</head>
<body>
<div class="box1">Box 1 (z-index: 1)</div>
<div class="box2">Box 2 (z-index: 2)</div>
<div class="box3">Box 3 (z-index: 0)</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，3 个 div 元素都是使用了绝对定位，此时它们会相互重叠。但由于 box2 的 z-index 为 2，box1 的 z-index 为 1，box3 的 z-index 为 0。因此最终堆叠顺序（从上到下）依次为：box2、box1、box3。
示例 2：z-index 取值为负整数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 {
width: 150px;
height: 50px;
background-color: salmon;
border: 1px solid gray;
margin: 20px;
}
.box2 {
position: absolute; /* 必须为非 static 定位 */
top: 10px;
left: 10px;
z-index: -1; /* 负 z-index */
width: 100px;
height: 100px;
background-color: lightskyblue;
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="box1">正常文档流内容</div>
<div class="box2">绝对定位的内容</div>
</body>
</html>页面效果如下图所示。
分析：
在上面例子中，box1 是 CSS 文档流 的元素，box2 使用了绝对定位。由于 box2 设置了 z-index: -1;，此时它会显示在正常文档流元素的下方。
在默认情况下，已定位元素会显示在非定位元素上方，但负 z-index 可以改变这个默认行为。
