relative定位不自动创建层叠上下文，z-index仅对已定位且同属一层叠上下文的元素生效；需检查祖先是否意外创建层叠上下文，为relative元素显式设置z-index，并在必要时用transform:translateZ(0)主动创建独立层叠上下文。
relative 定位本身不会创建新的层叠上下文（stacking context），所以单纯设 position: relative 并不能让元素“浮”在兄弟元素之上——能否覆盖，关键看它是否处于更上层的层叠顺序中，而 z-index 只在**已定位元素**（即 position 为 relative、absolute、fixed 或 sticky）且**同属一个层叠上下文**时才生效。
确保父容器没有意外创建层叠上下文
如果 relative 元素的某个祖先（比如父级或祖父级）设置了 z-index（且值不为 auto）、opacity 、transform、filter 等属性，就会创建新的层叠上下文。这时，该祖先内部所有子元素的 z-index 都只在它内部比较，无法越过它去和外部兄弟竞争层级。
- 检查父级是否无意中加了
transform: translateZ(0)或opacity: 0.99 - 用浏览器开发者工具的“Computed”面板查看“Stacking Context”信息
- 临时移除父级的可疑样式，确认是否恢复预期覆盖效果
给 relative 元素显式设置 z-index 并保证足够大
relative 元素必须同时满足两个条件才能参与层叠排序：一是 position: relative，二是有明确的 z-index 值（不能是 auto）。默认 z-index: auto 相当于没设，它会按文档流顺序排布，不抢占层级。
- 写成：
position: relative; z-index: 10;（数值建议从 10 起，避免和框架默认值冲突） - 若兄弟元素也设了
z-index，你的值必须严格大于它（如兄弟是 5，你就至少设 6） - 注意：
z-index: 9999不一定万能——如果它被包裹在一个z-index: 1的父容器里，整体仍会被父容器压制
必要时主动创建独立层叠上下文
当多个 sibling 元素需要精细控制遮盖关系，又不想依赖深层祖先的渲染逻辑时，可让它们各自成为独立层叠上下文的根，再通过 z-index 直接比大小。
立即学习“前端免费学习笔记（深入）”；
- 给每个需要参与层级竞争的 relative 元素加上
transform: translateZ(0)（轻量且兼容性好） - 或加
will-change: transform（更语义化，但慎用） - 此时它们互为同级层叠上下文，
z-index就真正“一对一”起效了
基本上就这些。核心不是“relative 要怎么盖住别人”，而是“谁和谁在同一个层叠上下文中比高低”。理清定位与层叠上下文的关系，比盲目调高 z-index 更可靠。
