遮罩必须用position: fixed全屏覆盖视口，而非嵌套在table内；否则会随滚动移出、盖不住溢出内容、z-index失效，且需配合top/left/width/height和足够高z-index确保层级正确。
直接给 <table> 加遮罩层是错的——遮罩必须覆盖整个视口，而不是只盖住表格区域；否则滚动时遮罩会消失、点击穿透、动画错位。正确做法是用独立 <code><div id="loading"> 全局覆盖，再靠 CSS 定位和 z-index 控制层级关系。
<h3>为什么不能把遮罩写在 <code><table> 里？
<p>常见错误是把遮罩 <code><div> 嵌套进 <code><table> 或其父容器内，然后设 <code>position: absolute。这会导致：
- 遮罩随表格滚动而移出视口（
absolute相对于最近定位祖先，不是屏幕） - 表格内容溢出时遮罩盖不住（尤其有横向滚动条的长表）
-
z-index在局部 stacking context 内失效，第三方组件或 iframe 可能穿出来
position: fixed 是唯一可靠定位方式
遮罩层必须脱离文档流、固定在视口左上角，且尺寸撑满整个可视区：
- 必须写
position: fixed，不是absolute或relative - 必须同时设
top: 0; left: 0; width: 100vw; height: 100vh（用vw/vh避免滚动条宽度影响） -
z-index至少设为9999，防止被bootstrap、ant-design等框架的 modal 覆盖 - 背景用
background: rgba(0, 0, 0, 0.4)，别用opacity——后者会让内部加载动画也变淡
表格数据加载时如何精准控制显隐？
遮罩显隐时机不对，用户会看到“空白闪一下”或“遮罩卡死”。关键在三点：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 初始加载：等
window.onload触发后再隐藏遮罩，否则图片、字体、iframe 没就绪，页面看起来像没加载完 - AJAX 场景：
fetch().finally()或 jQuery 的complete回调里隐藏，不是只在success里——失败、超时也要收掉遮罩 - 禁用交互：显示遮罩时，顺手给表格所在区域加
pointer-events: none（仅作补充，主防御靠遮罩层本身）
移动端点击穿透怎么破？
iOS Safari 和部分 Android WebView 中，即使遮罩层盖住了按钮，用户仍可能点中底层元素。这不是 bug，是浏览器默认允许穿透事件：
- 别设
pointer-events: none在遮罩上——那它就挡不住点击了 - 确保遮罩
z-index足够高，且没被transform、opacity创建新 stacking context - 最稳妥补丁：在遮罩层上监听
touchstart并立即event.preventDefault() - 加载动画慎用
transform: rotate()，旧版 Android WebView 渲染卡顿，优先用 GIF 或animation: spin+@keyframes
真正难的不是写几行 CSS，而是让遮罩在各种加载路径（首屏、表格重绘、分页 AJAX、ECharts 图表刷新）下都稳稳盖住、不闪、不卡、不漏点——所有逻辑必须统一走 showLoading()/hideLoading() 封装函数，别在各处零散操作 display。
