遮罩层必须用position: fixed，因其始终锚定视口、不随滚动偏移；absolute会受最近定位祖先约束，易因父容器高度不足、overflow或transform导致错位、漏白或露底。
遮罩层必须用 position: fixed，不是 position: absolute
因为 position: absolute 会相对于最近的 position: relative 父容器定位，一旦父容器高度不足或有滚动，遮罩就错位、露底；position: fixed 才真正锚定视口，不随滚动偏移。常见错误是把遮罩塞进某个 .card 或 .container 里，结果只盖住局部。
用 d-flex + justify-content-center align-items-center 居中内容，别手写 transform
Bootstrap 5 的弹性工具类已足够支撑垂直+水平居中，且比 top: 50%; transform: translateY(-50%) 更稳定——后者在小屏下易因行高/字体渲染偏差导致偏移，还可能被父容器 overflow: hidden 裁切。
-
height: 100vh比height: 100%可靠，避免父级高度塌陷 - 遮罩容器本身设
position: fixed; top: 0; right: 0; bottom: 0; left: 0;，再加d-flex justify-content-center align-items-center - 内部动效元素（如
spinner-border）需包裹在div中，否则默认无尺寸会塌缩 - 若要淡入效果，CSS 定义
.loading-overlay.show { opacity: 1; transition: opacity 0.2s; }，JS 控制classList.toggle('show')
JavaScript 控制显隐必须用 classList，禁用 style.display
硬写 el.style.display = 'block' 会覆盖 CSS 动画、媒体查询和响应式逻辑，也容易和 d-none 类冲突。Bootstrap 的设计原则是“样式归 CSS，行为归 JS”，遮罩的开关应靠增删类名驱动。
- 初始化 HTML 中写好
<div id="loading-overlay" class="d-none"> <li>AJAX 开始时： <code>document.getElementById('loading-overlay').classList.remove('d-none') - 务必在
finally块中统一关闭，否则网络失败时遮罩永远挂着 - 移动端需额外加
pointer-events: none防止遮罩拦截 focus/键盘操作（仅禁用鼠标不等于禁用可访问性） - 别忘了给遮罩加
background-color或半透背景，否则看不见 - 避免在遮罩上直接用
opacity降整体透明度——它会让内部文字、图标也变淡，应改用rgba()背景色 - 如果遮罩内含 SVG 图标，记得显式设置
width和height，否则可能不可见
z-index 必须 ≥ 1060，且注意 Bootstrap 默认层级
Bootstrap 5 的 modal 最高层级是 1055，如果遮罩 z-index 设成 1050，就会被模态框盖住；设成 9999 又可能干扰后续插件（比如 tooltip 或 popover）。实际项目中，1060 是安全又克制的选择。
