z-index失效主因是元素未定位或被父层叠上下文隔离；需设position为relative/absolute/fixed/sticky，且排查opacity<1、transform非none等触发新层叠上下文的祖先属性。
元素重叠不是 bug，而是 CSS 层叠机制的正常表现；关键在于你是否主动控制了 position 和 z-index，否则浏览器会按默认文档流和渲染顺序“被动重叠”，结果不可控。
为什么设置了 z-index 却没效果
最常见原因是目标元素的 position 仍为 static（默认值）——z-index 对它完全无效。
- 必须先给元素设
position: relative、absolute、fixed或sticky，z-index才生效 - 父容器若设置了
transform、opacity < 1、filter等，会创建新层叠上下文，导致子元素的z-index只在该上下文内比较，无法盖过外部同级元素 - 不要用超大数值如
z-index: 9999，优先用小整数（1、2、3），避免后期维护冲突
用 position: absolute 实现精准重叠
适合需要固定位置、脱离文档流的覆盖场景，比如弹窗、角标、图片叠加。
- 父容器必须设
position: relative，作为绝对定位的参考点 - 子元素设
position: absolute，再用top/left定位到同一区域（例如都设top: 0; left: 0） - 配合
z-index控制谁在上：背景图可设z-index: 1，图标设z-index: 10 - 注意：
width和height建议显式声明，否则absolute元素可能收缩到内容尺寸，导致定位偏差
不破坏文档流的轻量重叠法
适用于微调、悬停显示、头像+徽章等不需要脱离布局的场景。
立即学习“前端免费学习笔记（深入）”；
- 给元素设
position: relative，再用top、right等偏移，它仍在流内占位，不影响其他元素排布 - 配合
z-index控制层级，但要注意它会创建新的层叠上下文，影响子元素层级范围 - 也可用
transform: translate()替代top/left，性能更好且不触发重排，例如transform: translate(-8px, -8px)让图标左上偏移覆盖头像右下角 - 负
margin（如margin-top: -10px）也能实现视觉重叠，但仅改变渲染位置，不改变层叠顺序，默认按 HTML 书写顺序堆叠
真正难的不是让元素重叠，而是让它们在不同缩放、滚动、嵌套容器下依然保持预期层级——这取决于你是否理解层叠上下文的嵌套规则，而不是盲目堆 z-index。
