遮罩层用 position: absolute 而非 fixed，因其需贴合特定父容器（如 .modal-content），随其定位、缩放和滚动；fixed 会脱离文档流、固定视口导致错位。
遮罩层为什么用 position: absolute 而不是 fixed
因为遮罩要盖住特定容器（比如模态框、卡片），而不是整个视口。用 position: fixed 会导致它脱离文档流、固定在屏幕某处，滚动时错位，且无法随父容器缩放或偏移——尤其在 Bootstrap 的 .modal 或 .card 里，遮罩必须“贴着内容动”。
正确做法是：给父容器加 position: relative（Bootstrap 的 .modal-content 默认已是），遮罩设为 position: absolute，再用 top: 0; left: 0; width: 100%; height: 100% 填满父级。
- 别漏掉父容器的
position: relative，否则absolute会往上找最近的定位祖先，可能跑到body或html上 - Bootstrap 5 的
.modal-dialog默认没设position，得手动加到.modal-content或直接写在遮罩父元素上 - 如果父容器有
padding或border，遮罩可能溢出，建议用inset: 0替代top/left/width/height更稳妥
如何避免遮罩挡住 Bootstrap 的关闭按钮或标题
遮罩层级（z-index 必须卡在内容之下、交互元素之上。Bootstrap 5 的 .modal-header 默认 z-index: 1050，.modal-body 是 auto，遮罩若设成 z-index: 1040 就会被标题盖住；设成 1060 又可能压住关闭叉（.btn-close）。
- 查 Bootstrap 源码里的
$zindex-modal（默认 1055）、$zindex-modal-backdrop（默认 1050），遮罩推荐用z-index: 1052—— 刚好在 backdrop 之上、header 之下 - 不要全局用
z-index: 9999，容易和 Tooltip、Dropdown 冲突 - 如果遮罩内还要放按钮（比如“重试”），得单独给那个按钮设更高
z-index，并确保其父容器没overflow: hidden
遮罩背景色透明度怎么调才不发灰又压得住内容
直接写 background-color: rgba(0,0,0,0.5) 看似简单，但和 Bootstrap 的 .bg-dark 或深色主题叠加后，实际感知会变浑浊；更糟的是，某些安卓 WebView 对 rgba() 渲染不准，导致遮罩“看不见”。
- 优先用半透明白色遮罩配深色文字：
background-color: rgba(255,255,255,0.8)，再配合filter: blur(1px)（慎用，性能敏感） - 避免用
hsla()或渐变做遮罩背景，Bootstrap 的prefers-reduced-motion媒体查询可能忽略它 - 真要兼容老设备，用
background-color: #000+ 单独一层opacity: 0.4的伪元素，比纯rgba兼容性高
JavaScript 动态插入遮罩时要注意什么
用 JS 创建遮罩（比如加载中状态）很容易漏掉关键属性，导致布局跳动或事件穿透。最常见错误是没设 pointer-events: none，结果遮罩挡住了下面按钮的点击；或者没加 aria-hidden="true"，影响读屏器。
- 遮罩元素必须带
role="presentation"和aria-hidden="true" - 如果遮罩只是视觉遮挡，务必加
style="pointer-events: none"；如果要拦截点击（比如禁止操作），则用pointer-events: auto并监听click事件 - 插入位置很重要：不要插到
body最末，而应插到目标容器内部（如modal-content末尾），否则absolute定位失效 - 移除遮罩时记得清空
style内联样式，避免残留display: none影响后续复用
遮罩看着简单，但和 Bootstrap 的 z-index 体系、响应式断点、可访问性规则全绑在一起。动一个值，可能在 iPad 上正常，在折叠屏上错位，或者让键盘用户卡在遮罩后面出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
