用 position: fixed + display: flex 实现全屏遮罩居中，因 fixed 脱离文档流实现全屏定位，flex 解决未知尺寸下精准居中，二者缺一不可；需设 html/body height: 100%、z-index≥999、background-rgba 配 pointer-events 分层控制，并适配 iOS 视口与滚动。
用 position: fixed + display: flex 实现全屏遮罩居中
直接能用，不依赖 JS，现代浏览器全覆盖。关键不是“怎么写”，而是“为什么必须这样组合”——fixed 提供脱离文档流的全屏定位能力，flex 解决子元素在未知尺寸容器里的精准居中，两者缺一不可。
常见错误是只用 fixed 加 top: 50%; left: 50% 再加 transform: translate(-50%, -50%)，看似可行，但遇到滚动页面时遮罩会随视口偏移、内容区域缩放或高 DPI 屏幕下容易错位；而纯 flex 不配 fixed 又会被父容器限制高度，撑不满全屏。
-
html和body必须设height: 100%，否则100vh在某些 iOS Safari 版本里会失效 - 遮罩层需设
z-index（建议 ≥ 999），避免被第三方组件（如弹窗、Tooltip）盖住 - 加载图标本身别用
width/height: 100%，否则在 flex 容器里会拉伸变形；固定尺寸 +margin: auto更稳
遮罩背景半透与内容不可交互的关键样式
遮罩不是摆设，得真正挡住底层操作，同时让用户看清后面内容。这靠两个 CSS 属性配合：透明度控制视觉干扰，pointer-events 控制行为拦截。
- 背景用
background-color: rgba(0, 0, 0, 0.5)，别用opacity——后者会让内部加载图标也变透明，影响可读性 - 必须设
pointer-events: none在遮罩层上，再设pointer-events: auto在内部加载元素上，否则整个遮罩无法响应点击（比如加个「取消」按钮时会失灵） - 如果页面有
overflow: hidden的祖先容器，fixed元素可能被裁剪；此时要检查并移除该限制，或改用position: absolute配合body相对定位（但仅限无滚动场景）
适配移动端滚动与键盘弹出的兼容处理
iOS Safari 下，页面滚动或软键盘弹出会触发视口高度重算，100vh 可能突然变小，导致遮罩底部留白。这不是 bug，是 Safari 对「视口」定义更严格的结果。
立即学习“前端免费学习笔记（深入）”；
- 不用
height: 100vh，改用min-height: 100vh+min-height: 100dvh（dvh是动态视口单位，Chrome 105+/Safari 16.4+ 支持） - 加一行
body { overscroll-behavior: contain; }，防止遮罩激活时用户仍能滚动底层内容 - 若遮罩内含输入框（比如带搜索的加载态），需监听
focusin事件临时提升z-index，否则软键盘可能把它顶出视图
加载状态切换时的过渡与性能注意点
遮罩显示/隐藏不能硬切，否则闪烁明显；但加太多动画又拖慢首屏。重点在「轻量过渡」和「渲染时机」。
- 用
opacity+visibility组合控制显隐：visibility: hidden; opacity: 0配transition: opacity 0.2s ease，比display: none更顺滑且不触发回流 - 避免在
DOMContentLoaded前就插入遮罩 DOM，否则可能阻塞渲染；推荐在 JS 初始化逻辑里动态appendChild - 如果项目用 React/Vue，别把遮罩写成全局组件挂
body下——服务端渲染时会丢失fixed上下文，优先用createPortal或teleport投射到document.body
最常被忽略的是：遮罩的 z-index 值是否真正在所有上下文中生效。比如用了 CSS-in-JS 库，样式作用域可能让它的层级被意外覆盖；上线前务必在真实设备上滚动、缩放、唤起键盘多测几轮。
