全屏遮罩必须用 position: fixed 实现，因其锚定视口、不随滚动移动；absolute 受父容器限制易错位。应设 top/right/bottom/left 为 0，z-index≥1060，配合 d-flex 居中内容，并用 classList 控制显隐以保障性能与可维护性。
用 position: fixed 覆盖整个视口，不是 position: absolute
全屏遮罩的核心是让它不随滚动条移动、不被父容器裁剪，必须脱离文档流并锚定在视口左上角。用 position: absolute 会受最近的 position: relative 父元素限制，一滚动就露底；position: fixed 才真正“钉”在屏幕坐标系里。
常见错误现象：loading 层只盖住部分区域，或者滚动后消失、错位。
-
top: 0; right: 0; bottom: 0; left: 0;比width: 100vw; height: 100vh;更可靠（vh在移动端可能因地址栏缩放失效） - 务必加
z-index，且值要高于 Bootstrap 默认最高层（如modal是 1055），建议设为1060或更高 - 避免给遮罩加
transform，某些旧版 Safari 下会破坏fixed行为
Bootstrap 5 中直接复用 .d-flex 和 .justify-content-center 居中内容
不用手写 Flex 布局代码，Bootstrap 5 的工具类已足够支撑加载动画居中。重点是结构干净：遮罩层本身只负责覆盖和层级，内部子元素才负责对齐和动效。
使用场景：AJAX 请求开始时 show()，完成时 hide()；或配合 disabled 表单按钮防止重复提交。
- 遮罩层内嵌一个
<div class="d-flex justify-content-center align-items-center" style="height: 100%;">，再放<div class="spinner-border"> - 别把
.spinner-border直接放在fixed容器里——它默认尺寸小，没高度，会塌掉 - 如果用自定义 SVG 或图标，记得设
width/height，否则可能不可见
JavaScript 控制显示/隐藏时，优先操作 classList 而非 style.display
硬写 element.style.display = 'block' 容易和 CSS 动画、媒体查询冲突，也难维护。Bootstrap 的设计哲学是“样式归 CSS，行为归 JS”，遮罩的显隐应靠增删类名驱动。
性能影响：频繁改 style.display 触发重排（reflow），而 classList.toggle() 只触发重绘（repaint），更轻量。
- 初始化时在 HTML 里写好
<div id="loading-overlay" class="d-none">，JS 里只做el.classList.remove('d-none') - 如果需要淡入效果，CSS 里定义
.loading-overlay.show { opacity: 1; transition: opacity 0.2s; }，JS 控制show类即可 - 别忘了在 AJAX
finally块里统一关闭遮罩，否则网络失败时它会一直挂着
移动端适配：禁用 pointer-events 不等于禁用 focus/keyboard
遮罩层常用来拦截用户操作，但光写 pointer-events: none 不够——键盘焦点仍可穿透到后面表单，Tab 键还能切过去，甚至触屏键盘可能意外弹出。
容易踩的坑：以为加了遮罩就“锁死”了交互，结果测试时发现输入框仍能获得焦点、回车还能提交。
- 遮罩层本身加
tabindex="-1"并focus()，把焦点抢过来（再blur()也可，看需求） - 遮罩激活时，给 body 加
style="overflow: hidden;"，防止滚动穿透 - 若页面有
input或button正在聚焦，遮罩出现瞬间需手动document.activeElement?.blur()
absolute 就够了。 
