遮罩层必须用 position: fixed 而非 absolute，否则易出现定位错乱、覆盖不全、点击穿透等问题；正确写法是 fixed + top:0 + left:0 + width:100vw + height:100vh + z-index≥9999 + background:rgba()，并配合动画、状态锁和 DOM 位置规范。
遮罩层必须用 position: fixed，不是 absolute
滚动时遮罩消失、只盖住首屏、点击穿透——90% 的问题都出在这里。用 absolute 会让遮罩相对于最近的已定位祖先定位，而多数页面没设 position: relative，结果遮罩就“飘”在 body 左上角或只撑开几行高。
真正可靠的写法是：
-
position: fixed+top: 0+left: 0 -
width: 100vw（不用100%，它依赖父高，body 没撑满就失效） -
height: 100vh（Safari 下建议同时给html, body { height: 100% }防计算异常） -
z-index: 9999起步，尤其要压住select、iframe、富文本编辑器等“z-index 狂魔”
background: rgba() 比 opacity 安全得多
把遮罩套在表格或容器外层并设 opacity: 0.4，会导致整个内容变灰、文字模糊、边框发虚——这不是遮罩，是视觉降级。用户根本分不清哪块在加载，哪块可操作。
正确做法是独立遮罩 DOM，仅控制自身背景：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 用
background: rgba(0, 0, 0, 0.4)，不透明度只作用于遮罩本身 - 避免
filter: alpha(opacity=...)（IE 旧语法，现代项目不用） - 移动端加
touch-action: none防止手势穿透，同时body { overflow: hidden }锁住滚动
动画只动 opacity 和 transform，别碰布局属性
用 display: none/block 切换遮罩会触发重排，动画卡顿；纯 opacity 又太“平”，缺乏反馈感。推荐组合动画：
@keyframes loader-fade-in {
0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
}
.loader-overlay {
animation: loader-fade-in 0.3s ease-out forwards;
will-change: opacity, transform; /* 提前提示 GPU 合成，但别滥用 */
}- 动画时长控制在
250ms–350ms：短了用户感知不到，长了像卡死 - 禁用
width、height、margin动画——这些触发布局，性能掉档 -
will-change仅在动画元素上加，不要全局写
JS 控制要防竞态，finally 才是关闭的黄金位置
用户连点按钮、接口并发、路由快速跳转，极易导致遮罩“开了关不掉”或“刚关又弹”。核心不是靠运气，而是状态锁 + 生命周期对齐。
- 维护一个
isLoaderActive标志位，showLoader()前先检查是否已在显示 - 隐藏操作别直接
remove()或display = 'none'，应加退出 class，监听animationend后再移除节点 - 和
fetch配合时，hideLoader()必须放在finally块里，不是then也不是catch—— 请求失败、超时、网络中断都得关 - 移动端还要拦截
touchstart事件，防止手指穿透遮罩点到下层按钮
最易被忽略的是：遮罩 DOM 必须放在 <body> 最顶部，不能嵌套在任何组件或路由容器内；否则 SSR 或框架动态挂载时，z-index 层级容易错乱，尤其在微前端场景下。
