absolute定位不能直接覆盖目标元素，因它默认相对于最近已定位祖先定位；若父容器未设position:relative，坐标原点会错位到body或html，导致偏移异常。
absolute定位为什么不能直接覆盖目标元素
用 position: absolute 的元素默认相对于最近的已定位祖先（position 为 relative、absolute 或 fixed）进行偏移。如果父容器没设 position: relative，它就会一路往上找，甚至跑到 或 上去定位，导致坐标原点错位，看着“盖歪了”。
常见错误现象：top: 0; left: 0 没盖住目标，反而飘到页面左上角；或者盖住了，但随滚动条一起动（其实是相对于视口固定了）。
- 确保被覆盖元素的**直接父容器**设置了
position: relative - 覆盖层自身用
position: absolute，并显式设置top/left（或inset）对齐目标位置 - 若目标元素本身是
absolute或fixed，覆盖层需和它同级或更深层级的定位上下文里定义
z-index 失效的三个典型原因
z-index 不是全局层叠开关，它只在同一个“层叠上下文”（stacking context）内生效。两个元素即使 z-index 值差 1000，只要不在同一上下文里，就可能完全不比较。
常见错误现象：覆盖层明明写了 z-index: 9999，却还在按钮下面；或者父容器加了 opacity: 0.99 后，子元素的 z-index 突然不顶用了。
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
position+z-index（且值不为auto），就会创建新层叠上下文，子元素的z-index只在该容器内部排序 -
opacity小于 1、transform非none、filter、will-change等属性也会隐式创建层叠上下文 - 避免嵌套多层
z-index控制——优先让覆盖层和目标元素处于同一层叠上下文，比如都放在同一个position: relative容器下
精确对齐覆盖区域的两种可靠方式
手动算 top/left/width/height 容易因边框、滚动条、缩放失准。推荐用 CSS 原生能力减少 JS 干预。
场景：给一个按钮加遮罩层，要求严丝合缝盖住按钮本身，且响应式缩放时仍准确。
- 用
inset: 0替代top: 0; left: 0; right: 0; bottom: 0，语义更清晰，兼容性也够（Chrome 54+/Firefox 57+） - 如果必须支持老浏览器，用
top: 0; left: 0; width: 100%; height: 100%，但要确认目标元素的box-sizing是border-box（否则边框会撑出） - 更稳妥的做法：把覆盖层作为目标元素的最后一个子元素，并设
position: absolute; inset: 0，这样它天然继承父宽高，无需额外测量
移动端 touch 事件穿透问题怎么破
覆盖层加上了，视觉上盖住了，但点击还是触发了底下的按钮——这是 pointer-events 没关。
尤其当覆盖层只是视觉遮罩（比如 loading 动画），但没设交互属性时，默认仍会透传触摸事件。
- 务必给覆盖层加
pointer-events: none（如果它不需要任何交互） - 如果覆盖层需要响应点击（比如关闭遮罩），则用
pointer-events: auto，并确保它有明确的z-index和定位上下文 - 注意：iOS Safari 在某些
transform场景下会有 pointer-events 异常，可加backface-visibility: hidden缓解
pointer-events。 
