position: absolute 元素默认脱离文档流且堆叠层级低，解决关键在于主动控制层级顺序；需确保元素定位有效、避免隐式层叠上下文干扰，并用合理 z-index 分层而非盲目调高数值。
用 position: absolute 的元素默认会脱离文档流，且堆叠层级（stacking context）较低，容易盖住后面的内容。解决核心是**主动控制层级顺序**，而不是单纯调高 z-index。
理解 z-index 生效的前提
z-index 只对定位元素（position 为 relative、absolute、fixed 或 sticky）有效。普通静态元素（position: static）设 z-index 没用。
- 父容器若创建了新的层叠上下文（比如设置了
opacity 、transform、filter等），子元素的 z-index 就只在该父容器内部比较，不会和外部元素直接比 - 同级定位元素中，z-index 值大的显示在上层；值相同时，DOM 后出现的覆盖先出现的
常见遮挡场景与对应解法
不是所有遮挡都靠“把 z-index 调到 999”就能解决，得看结构关系：
-
绝对定位弹窗盖住了导航栏？ → 给导航栏也加
position: relative并设合理 z-index（如 100），弹窗设更高值（如 1000），确保它们处于同一层叠上下文层级 -
轮播图里的 absolute 指示器盖住了下面的文字？ → 不要给指示器设过高 z-index，而是给文字容器加
position: relative和稍高的 z-index（比如 2），让文字“浮起来” - 多个 absolute 元素互相打架？ → 避免全设超大数字。用小范围整数分层：背景层（1）、内容层（10）、操作层（20）、提示层（50）、模态框（100）
避免隐式层叠上下文干扰
有些 CSS 属性会悄悄创建新层叠上下文，导致 z-index 失效或效果异常：
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否意外加了
opacity: 0.99、transform: translateZ(0)、will-change: transform等 - 如果必须用这些属性，就把需要“穿透层级”的元素提到同一父级下，或统一管理它们的父容器 stacking context
- 用浏览器开发者工具的“Layers”面板（Chrome）或“Computed”中查看
stacking context，确认层级是否按预期生成
更健壮的替代思路
有时换种布局方式比硬调 z-index 更可靠：
- 能用
position: relative+top/left微调位置的，就别用absolute脱离流 - 用 Flex 或 Grid 布局实现“悬浮效果”，比如用
align-self: flex-end或grid-row: 1 / -1控制位置，不破坏文档流 - 需要遮罩层时，用固定定位的全屏
div作为统一 backdrop，再把弹窗放在它里面，逻辑更清晰
基本上就这些。关键是理清谁在哪个层叠上下文中，再有节制地用 z-index 分层——不是数值越大越好，而是结构越清晰越稳。
