遮罩层z-index不必绝对高于弹层，但需确保遮罩盖住背景、弹层盖住遮罩；推荐遮罩z-index:1000、弹层z-index:1001+；注意父容器z-index和position影响、移动端fixed定位更可靠、rgba()背景优于opacity。
遮罩层 z-index 要比弹层高吗？
不是必须，但必须满足「遮罩层能盖住背景、弹层能盖住遮罩层」这个视觉层级关系。常见错误是给遮罩设了 z-index: 10，弹层却用 z-index: 9，结果点不到按钮、拖不动窗口。
- 推荐做法：遮罩用
z-index: 1000，弹层用z-index: 1001或更高（如1010），留出余量避免被第三方组件覆盖 - 注意父容器的
z-index会影响子元素——如果弹层父级设置了z-index: 1且未设position，子元素的z-index可能失效 - 移动端 Safari 对
z-index的解析更敏感，建议所有参与叠层的元素都显式声明position: relative或position: fixed
pointer-events: none 能让遮罩透传点击吗？
可以，但仅限于「完全不交互的遮罩」。比如纯视觉蒙版、加载中半透明灰层；一旦遮罩本身需要响应关闭（如点击遮罩关闭弹窗），就不能加 pointer-events: none。
- 典型误用：
.mask { pointer-events: none; }+.modal { pointer-events: auto; }，结果整个弹层区域都无法触发点击 - 正确分层逻辑：遮罩设
pointer-events: auto，监听click并判断event.target === maskEl再关闭；弹层内部元素自然捕获事件 - 若真需透传（例如在遮罩上叠加浮动操作按钮），应把按钮放在遮罩同级、
z-index更高，并单独控制其pointer-events
用 fixed 还是 absolute 定位遮罩？
优先用 position: fixed。遮罩本质是“覆盖整个视口”，和页面滚动无关；用 absolute 容易因父容器 transform、perspective 或 filter 创建新的层叠上下文，导致定位偏移或层级错乱。
-
fixed遮罩需配合top: 0; left: 0; width: 100vw; height: 100vh;，注意100vh在 iOS Safari 中可能因地址栏缩放失真，可改用100dvh（支持 Chrome 105+/Safari 16.4+）或降级为min-height: 100vh - 若必须用
absolute（如嵌入某个局部模块），确保其父容器有position: relative且无transform等属性，否则遮罩会相对该父容器定位，而非视口 - 滚动时遮罩抖动？大概率是用了
absolute+ 页面有scroll-behavior: smooth，切换成fixed即可解决
遮罩背景用 rgba() 还是 background-image？
小透明度用 rgba(0, 0, 0, 0.5)，大透明度或需模糊效果才考虑 backdrop-filter + 半透背景。别用 url("data:image/svg+xml,...") 模拟透明度——增加解析开销，且无法动态调透明度。
立即学习“前端免费学习笔记（深入）”；
-
rgba()兼容性好（IE9+），性能最优；但无法实现毛玻璃效果 - 要毛玻璃：遮罩加
backdrop-filter: blur(4px)，同时配background-color: rgba(0, 0, 0, 0.3)作降级；注意 iOS Safari 15.4 前需加-webkit-backdrop-filter - 避免用
opacity控制遮罩透明度——它会让整个遮罩及其子元素（包括弹层）一起变淡，违背设计意图
backdrop-filter、dvh）混用时的隐性冲突。动手前先确认目标环境支持范围，比堆技巧更重要。 
