CSS 学习手册

`z-index` 属性控制元素在 Z 轴（垂直屏幕方向）上的堆叠顺序。数值越大，元素越靠上。 **注意：** 只有定位元素（`position` 值为 relative、absolute、fixed、sticky）且 `z-index` 为整数值（非 auto）时，才形成层叠上下文。 ```css .box1 { position: relative; z-index: 10; } .box2 { position: relative; z-index: 5; } /* box1 会在 box2 上面 */ ``` **层叠上下文（Stacking Context）**： - 根元素（html） - 定位元素且 z-index 不为 auto - flex 容器的子项，且 z-index 不为 auto - grid 容器的子项，且 z-index 不为 auto - opacity 小于 1 的元素 - transform、filter、perspective 等属性也会创建层叠上下文 **层叠顺序（由低到高）：** 1. 背景和边框（根元素） 2. 负 z-index 的块级子元素 3. 正常流的块级元素 4. 浮动元素 5. 正常流的内联元素 6. z-index: auto 或 0 的定位元素 7. 正 z-index 的定位元素 **示例：** ```css .parent { position: relative; z-index: 1; } /* 创建层叠上下文 */ .child { position: absolute; z-index: 999; } /* 但受限于父层叠上下文 */ ```