在 CSS 布局中，z-index 看起来只是一个简单的数字，但它背后涉及浏览器渲染管线、文档流（Document Flow）和层叠上下文（Stacking Context）等核心概念。
一、 z-index 会触发浏览器回流（Reflow）吗？
结论：不会。
修改 z-index 通常是非常“廉价”的性能操作，原因如下：
- 不影响几何属性： 回流（Reflow）发生在浏览器计算元素的宽、高、内边距、外边距及页面位置时。而
z-index仅改变元素在 Z 轴（垂直于屏幕的方向）上的堆叠顺序，不影响元素在 X 轴和 Y 轴的占位。 - 渲染流水线： 在浏览器的渲染流水线中，
z-index的处理位于 Composite（合成） 阶段。它跳过了 Layout（布局）和 Paint（绘制，视遮挡情况而定）的大部分工作，由 GPU 直接处理层的合并。
二、 只有 position: absolute 才能用 z-index 吗？
这是一个常见的技术误区。z-index 的生效前提是元素必须脱离“平凡”的状态，成为一个定位元素或特定容器的子项：
- 显式定位元素： 只要
position的值不是static（如relative、absolute、fixed、sticky），z-index均有效。 - 现代布局容器： 如果父元素是
display: flex或display: grid，其直接子元素即使是static定位，设置z-index依然有效。
三、 深度解析：relative 到底脱离文档流了吗？
这是一个非常有趣的状态，我们可以称之为 “物理留存，视觉漂浮” 。
1. 为什么说它没脱离文档流？
当你给元素设置 position: relative 并通过 top/left 偏移时：
- 占位保留： 元素在 HTML 原始位置上的“坑”依然存在。
- 邻居不动： 即使该元素飘到了天边，它的邻居元素也不会向上填补空隙。
- 参考系： 它的偏移是相对于它自己原本所在的位置。
2. 既然没脱离，为何能用 z-index？
relative 的本质是激活了层叠上下文。
虽然它在物理布局上还守着自己的“坑位”，但在渲染层级上，它已经获得了从二维平面向三维空间伸展的权限。这就像是在原有的地基上搭起了一个透明脚手架，底座（占位）没变，但你可以决定架子上的东西摆在多高。
四、 核心对比：Relative vs. Absolute
| 特性 | position: relative | position: absolute |
|---|---|---|
| 文档流状态 | 未脱离（物理占位保留） | 已脱离（物理占位消失） |
| 偏移参考点 | 元素自身原始位置 | 最近的非 static 祖先元素 |
| 对邻居影响 | 无影响 | 邻居会重新排版填补空隙 |
| z-index 权限 | 有 | 有 |
五、 避坑指南：为什么我的 z-index 无效？
如果你发现设置了很大的 z-index 却依然被别人挡住，请检查以下三点：
- 父级压制： 层叠上下文是嵌套的。如果父元素 A 的
z-index比父元素 B 低，那么 A 内部的所有子元素无论z-index多大，都会被 B 盖住。（ “不要和老板拼身价” ） - 未触发定位： 检查元素是否还是默认的
position: static。 - 隐式层叠上下文： 一些 CSS 属性（如
opacity < 1、transform、filter、mix-blend-mode）会意外地创建一个新的层叠上下文，导致内部的z-index重新计数。
总结： z-index 是高性能的 UI 调度工具。理解 relative 的“半脱离”状态和层叠上下文的层级关系，是解决复杂网页层级混乱的关键。
