relative元素未设z-index时不参与z轴排序，仅获偏移能力；必须同时满足position非static且z-index为具体整数才生效，且受祖先层叠上下文限制。
relative元素没设z-index，压根不参与Z轴排序
只写position: relative，不等于“浮起来”。它只是获得top/left等偏移能力，Z轴层级仍按默认文档流顺序排——后出现的static元素、浮动元素、甚至其他未设z-index的定位元素，都可能盖住它。
必须同时满足两个条件：position非static + z-index为具体整数（不能是auto）。
-
z-index: auto等同于没写，浏览器忽略该声明 - 数值建议从
10起，避开UI框架默认值（如Ant Design的z-index: 10用于Tooltip） - 若兄弟元素也设了
z-index，你的值必须严格大于它（比如兄弟是5，你就得设6或更高）
父容器悄悄创建了层叠上下文，把你“关小黑屋”了
即使你给.overlay写了z-index: 999，它仍可能被.sidebar（z-index: 1）盖住——不是你值不够大，而是你们根本不在同一个“比大小”的世界里。
只要某个祖先元素满足以下任一条件，就会创建独立层叠上下文，子元素的z-index就只能在它内部生效：
-
opacity小于1（哪怕opacity: 0.99） -
transform不为none（包括transform: translateZ(0)、scale(1)） -
filter不为none -
will-change: transform或will-change: opacity -
position为fixed/sticky且z-index不为auto
用Chrome DevTools打开「Computed」面板，搜索stacking context；或进「Rendering」→勾选「Show layers panel」→切到「Layers」标签页，直接看哪个节点标着This element establishes a stacking context。
兄弟元素本身也在独立层叠上下文中，你们根本没在比
两个relative元素，一个在.card里（transform: scale(1)），一个在.header里（opacity: 0.99），它们各自父容器都创建了层叠上下文。此时它们的z-index互不干扰——谁在上，取决于.card和.header这两个容器自身的层叠顺序。
常见误判场景：
- 导航栏用了
position: fixed，但被套在带transform的动画容器里 → 它的z-index只在动画容器内有效 - 弹窗组件内部节点没设
position，只靠父级z-index撑着 → 子节点仍是static，z-index无效 - Flex/Grid容器中子项写了
z-index，但父容器有overflow: hidden→ 子项可能被裁剪，根本没机会渲染出来
想让relative元素真正“盖住别人”，得主动破局
如果无法修改祖先样式（比如第三方组件封装太深），又必须让relative元素突破限制，最轻量的做法是让它自己成为层叠上下文根：
- 加
transform: translateZ(0)：兼容性好，开销低，明确告诉浏览器“我要独立一层” - 或加
will-change: transform：语义更清晰，但慎用，避免过度触发合成层
此时，多个兄弟relative元素各自成“国”，z-index就能一对一硬刚——不再被祖辈的opacity或transform锁死。
真正难的不是调高z-index，而是看清当前DOM树里到底有几个层叠上下文、谁在控制谁的Z轴范围。DevTools的Layers面板不是可选项，是必查项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
