绝对定位内容被遮挡的本质是层叠上下文与z-index层级关系未理清；需检查最近定位祖先是否创建了独立层叠上下文（如z-index不为auto），并统一在同层上下文中用合理z-index值（如header:100、modal:300）调控显隐顺序。
使用 position: absolute 时内容被遮挡，本质是层叠上下文（stacking context）和 z-index 顺序没理清，不是“定位本身有问题”，而是层级关系没主动控制。
明确父容器是否创建了新的层叠上下文
如果绝对定位元素的**最近定位祖先**（即设置了 position: relative/absolute/fixed/sticky 的父级）同时设置了 z-index（且值不为 auto），它就会创建独立的层叠上下文。此时子元素的 z-index 只在该上下文内生效，无法越过父级去和外部元素比高低。
- 检查父容器是否无意中加了
z-index: 0或其他数值 —— 这是最常见的“突然盖不住外面”的原因 - 若不需要隔离层级，把父级的
z-index改为auto或直接删掉 - 若必须保留父级定位，就把需要“浮出来”的绝对定位元素提级到更高层的共同祖先下，避开该层叠上下文
统一用 z-index 控制显隐优先级
z-index 只对定位元素（position 不为 static）有效，且需注意：数值越大越靠前，但前提是它们处于同一层叠上下文中。
- 给关键模块设定清晰的
z-index基线，例如：header: 100、dropdown: 200、modal: 300 - 避免用过大的数字（如
9999），留出扩展余地；也别混用负值，除非明确需要沉底 - 如果两个绝对定位块重叠，先确认它们是否同属一个层叠上下文，再调
z-index
慎用 top/left 硬位移，优先考虑布局流让位
过度依赖 absolute 把元素“抠”出来，容易脱离文档流、挤压或覆盖其他内容。有时换种思路更稳妥：
立即学习“前端免费学习笔记（深入）”；
- 能用
margin、transform微调位置的，就别用absolute强占空间 - 下拉菜单、提示气泡等临时浮层，用
absolute合理；但导航栏、侧边栏这类主结构，优先用flex或grid布局 - 必要时配合
pointer-events: none（配合pointer-events: auto在子元素上恢复）来透传点击，缓解遮挡交互问题
用浏览器开发者工具快速定位遮挡源
Chrome/Firefox 的“Layers”面板（在 Rendering 设置里开启）或 Elements 面板的 :hover 检查，能直观看到哪些元素生成了层叠上下文，以及各元素的 z-index 实际计算值。
- 右键被盖住的元素 → “Inspect” → 看 Styles 面板中
z-index是否生效（灰色表示未启用） - 在 Elements 面板中逐个关闭疑似遮挡元素的
visibility或opacity，快速定位元凶 - 勾选“Paint flashing”可高亮重绘区域，辅助判断是否因层级混乱导致渲染异常
