fixed遮罩被内容“顶出”是因为父容器设transform/perspective/filter创建了新层叠上下文，使fixed元素相对父容器而非视口定位；应将其移至body下并用inset:0+flex居中，配合pointer-events:none、aria-hidden和overflow:hidden防交互穿透。
直接用 position: fixed + z-index 就能实现，但关键在遮罩层级、动画触发时机和移动端适配——稍不注意就会被内容顶破、动画卡顿或点击穿透。
为什么 fixed 遮罩常被内容“顶出来”
根本原因是父容器设置了 transform、perspective 或 filter（比如 Bootstrap 的 .modal 或某些动画组件），这会创建新的层叠上下文，导致子级 fixed 元素的定位参考不再是视口，而是该父容器。
实操建议：
- 检查遮罩是否嵌套在
.modal、.dropdown或带transform: translateZ(0)的容器里——如果是，必须把遮罩移出，挂到下 - 给遮罩加
z-index: 9999不够，得确认它和目标容器不在同一层叠上下文；最稳做法是：用 JS 动态 append 到document.body - 避免用
top: 0; left: 0; width: 100%; height: 100%—— 改用inset: 0（现代浏览器支持好，更简洁）
如何让加载动画居中且不抖动
Bootstrap 默认的 spinner 是 inline 元素，直接放 fixed 层里容易因字体渲染或行高错位。居中逻辑本身简单，但抖动往往来自动画重绘或尺寸未固定。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 遮罩层用
display: flex; justify-content: center; align-items: center，比margin: auto或transform: translate(-50%,-50%)更稳定 - 加载图标必须设明确宽高，例如
.spinner-border { width: 3rem; height: 3rem; }；否则 Safari 下可能缩放异常 - 动画用
animation: spin 1s linear infinite，别依赖transition，后者在快速 show/hide 时易残留状态
如何防止遮罩下内容被点击或聚焦
仅靠 pointer-events: none 不够——键盘用户仍可 Tab 进去，屏幕阅读器也照读。真正阻断交互需多层配合。
实操建议：
- 遮罩层加
pointer-events: none，内部 loading 区域加pointer-events: auto（否则 spinner 点不了） - 同时给 body 加
aria-hidden="true"和tabindex="-1"，并在 JS 中临时移除所有可聚焦元素的tabindex或加inert属性（Chrome 100+ 支持） - 别只禁用按钮——表单输入框、链接、自定义组件都可能响应焦点，最好统一加
data-loading="true"后用 CSS[data-loading="true"] * { pointer-events: none !important; }
移动端触摸穿透怎么破
iOS Safari 在 fixed 层上滚动时，底层内容仍可能响应 touchstart，尤其当遮罩没占满视口或有 overflow: hidden 漏洞时。
实操建议：
- 遮罩必须覆盖整个视口：用
inset: 0; width: 100vw; height: 100vh;，并补一句min-height: 100vh;防 iOS 视口缩放后留白 - 给
body加touch-action: none;，阻止默认手势传递 - 如果页面本身可滚动，遮罩出现时立刻
document.body.style.overflow = 'hidden'，消失时恢复；注意保存原始scrollY值，避免跳回顶部
最麻烦的不是写几行 CSS，而是每次换一个 Bootstrap 版本或集成新 UI 库，都要重新检查层叠上下文和事件拦截逻辑——尤其是 transform 和 inert 的兼容性边界。
