遮罩层必须用 position: fixed 或 absolute；推荐 fixed 配 100vw/100vh，避免滚动露底；z-index 失效需检查祖先 transform/will-change 创建的层叠上下文；关闭弹窗应监听遮罩 click 并判断 e.target === this；移动端需加 touch-action: none 提升触摸体验。
遮罩层必须用 position: fixed 或 absolute
遮罩层（overlay）本质是覆盖整个视口的半透明层，如果用 static 或 relative 布局，它只会占据内容高度，滚动时会露底。最稳妥的是 position: fixed，能随视口固定、无视滚动：
<div id="overlay" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 1000;"></div>
注意：width: 100vw 比 100% 更可靠——后者在有垂直滚动条时可能略窄；height: 100vh 确保撑满视口高度，不依赖父容器。
z-index 不生效？检查父元素的 transform 或 will-change
即使设置了高 z-index，遮罩仍被其他元素穿透，大概率是因为某个祖先元素触发了新的层叠上下文（stacking context），比如加了 transform: translateZ(0)、opacity: 0.99 或 will-change: transform。这些属性会创建独立层叠环境，导致子元素的 z-index 只在该环境中生效。
- 临时排查：给遮罩父级（通常是
）加transform: none，看是否恢复 - 根治办法：把遮罩直接挂到
document.body下，避开深层嵌套 - 避免在遮罩同级或上级使用
opacity ，它也会创建层叠上下文
点击遮罩关闭弹窗？别只监听 click 事件
用户点遮罩关闭弹窗是常见需求，但仅绑 click 到遮罩上会有问题：如果弹窗内容区域（如按钮、输入框）阻止了事件冒泡，或用户快速双击/触摸屏误操作，逻辑就断了。
立即学习“前端免费学习笔记（深入）”；
更健壮的做法是监听遮罩的 click，同时确保弹窗内容不阻止传播：
document.getElementById('overlay').addEventListener('click', function(e) {
if (e.target === this) { // 确保点的是遮罩本体，不是内部子元素
closeDialog();
}
});
关键点：e.target === this 这个判断不能省——否则点弹窗里的按钮也会触发关闭。
移动端触摸体验差？补上 touch-action: none
在 iOS Safari 和部分安卓浏览器中，遮罩层默认允许页面缩放、拖拽，导致手指划过时页面轻微偏移，甚至触发橡皮筋效果。加上 touch-action: none 能禁用所有原生手势，让遮罩响应更干净：
#overlay {
touch-action: none;
}
注意：如果遮罩里有可滚动区域（如长列表），不要给整个遮罩设这个属性，而是单独给滚动容器设 touch-action: auto 或 pan-y。
z-index 和 transform 层级。 
