z-index 不生效的根本原因是元素未处于同一层叠上下文中；需确保父容器触发层叠上下文（如 position:relative 且 z-index 不为 auto），子元素才可依 z-index 比较层级。
z-index 不生效？先确认父容器有没有「层叠上下文」
很多情况下 z-index 看似写了但完全不起作用，根本原因不是写错了值，而是它所在的元素没有参与层叠上下文的创建。只有在同一个层叠上下文中，z-index 才能决定谁在上谁在下。
常见触发层叠上下文的条件（任一即可）：
-
position值为relative、absolute、fixed或sticky且z-index不是auto -
opacity小于 1 -
transform不为none -
will-change指定了影响层叠的属性 -
filter不为none
比如两个兄弟 div 都设了 z-index，但如果它们共同的父容器没建立层叠上下文，那它们其实各自在不同的“叠层世界”里，互不比较。
relative 定位 + z-index 是最稳妥的堆叠起点
想让一个盒子稳稳盖在另一个上面，别急着用 absolute——它会脱离文档流，容易引发布局塌陷或响应式错位。用 position: relative 更安全：它不改变布局位置，只激活 z-index 能力。
实操建议：
- 给要堆叠的元素统一加
position: relative - 用
z-index控制层级顺序，数值越大越靠前（注意：仅在同一层叠上下文中有效） - 避免滥用大数字（如
z-index: 9999），容易和模态框、Tooltip 等第三方组件冲突 - 如果只是两层覆盖，
z-index: 1和z-index: 2就够用
示例：
.box-a { position: relative; z-index: 1; }<br>.box-b { position: relative; z-index: 2; } —— .box-b 就会盖在 .box-a 上面，且两者仍在正常文档流中。绝对定位盒子重叠时，left/top 偏移量决定视觉落点
用 position: absolute 实现精确堆叠（比如徽标角标、悬浮按钮），关键不在 z-index，而在 top/left 的具体值是否对齐目标区域。
常见错误现象：
- 角标跑出父容器边界 → 忘记给父容器加
position: relative（否则absolute会相对于 viewport 定位） - 多个绝对定位盒子挤在一起 → 没设置
top/right等偏移，全部默认落在左上角 - 响应式下错位 → 用固定像素（如
top: 10px）而非相对单位（top: 5%）或transform
推荐组合：position: absolute + top: 0 + right: 0 + transform: translate(50%, -50%)，能精准锚定右上角并居中自身。
多层堆叠时，z-index 数值必须「有区分、有依据」
三个及以上盒子叠加时，随意设 z-index: 1/2/3 看似合理，但一旦中间插入新层（比如弹窗、加载遮罩），就容易穿帮。真正可靠的方案是按语义分层，预留间隙。
典型分层策略（参考 Bootstrap 和 Material Design）：
- 基础内容层：
z-index: 0～10 - 浮动操作按钮 / 导航栏：
z-index: 100～199 - 模态框背景：
z-index: 1000 - 模态框主体：
z-index: 1050 - Tooltip / Popover：
z-index: 1100
这样后续加功能时，不用反复调整旧代码的 z-index，只要选对区间就行。别省那几行注释——在 CSS 里写上 /* z-index: 1050 — modal content */ 很值得。
堆叠这事，表面是数字大小，实际是上下文、定位方式、父级约束三者咬合的结果。漏掉任何一环，都可能让盒子“悬空”或“沉底”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
