根本原因是用了opacity或未控制好层叠上下文；必须用background-color: rgba(0,0,0,0.7)而非opacity，确保pointer-events: auto、z-index独立生效且父容器不触发新层叠上下文。
遮罩层为什么点不中、点穿、或文字发虚
根本原因不是 z-index 没设高，而是用了 opacity 或没控制好层叠上下文。用 opacity: 0.7 给整个模态框容器设透明度，会导致内部按钮、文字一起变淡，iOS Safari 下还会渲染发虚、点击区域弱；更糟的是，某些重置样式表会把 .overlay 的 pointer-events 设为 none，表面看着在那儿，实际点不着。
必须用 background-color: rgba(0, 0, 0, 0.7) 控制背景透光度，子元素保持 100% 清晰和可交互。同时确认：pointer-events: auto（默认值，但要检查是否被覆盖）；z-index 独立生效（父容器不能有 opacity、transform、filter 等触发新层叠上下文的属性）。
z-index 值设多少才不被 Bootstrap 或其他 UI 库盖住
Bootstrap 的 .modal-backdrop 默认是 z-index: 1040，.modal 是 1050。如果你的遮罩层没显式声明 z-index，或者只写了 999，它大概率被压在下面。
- 遮罩层容器用
position: fixed（不是absolute），确保覆盖全视口 -
z-index至少设为1060；若页面还用了 Ant Design（backdropz-index: 1050）或 Element Plus（2000），就取最大值 + 10 - 避免在
body或遮罩父容器上加transform、will-change——它们会创建新 stacking context，让子级z-index失效
移动端滚动锁死、点击穿透、iOS Safari 卡顿的硬性补救
哪怕 rgba 和 z-index 都对了，iOS 上仍可能白忙活：一开遮罩，页面滚不动；点遮罩没反应，却触发了底下按钮。
立即学习“前端免费学习笔记（深入）”；
三个必须加的声明：
-
touch-action: none—— 否则 iOS 可能跳过click直接触发tap，导致事件穿透 - 打开时立刻给
body加overflow: hidden；关闭时同步移除——漏掉这步，页面永远滚不了 - 遮罩层容器加
width: 100vw; height: 100vh;，别依赖100%，防止某些安卓 WebView 计算错误留白或滚动条
响应式遮罩如何适配不同屏幕与深色模式
遮罩不是写死一个 rgba(0,0,0,0.7) 就完事。小屏下 alpha 值太低（如 0.4）遮不住内容，太大（如 0.95）又显脏；深色模式下纯黑遮罩（rgba(0,0,0,0.7)）和背景对比不足，文字难读。
推荐做法：
- alpha 值控制在
0.6–0.8区间，移动端优先用0.7 - 深色模式下可切换为
rgba(255, 255, 255, 0.15)浅灰蒙层，配合文字color: #fff和text-shadow: 0 1px 2px rgba(0,0,0,0.3) - 不要用
@media (prefers-color-scheme: dark)覆盖整个遮罩样式，只换background-color值，避免重绘抖动
最易被忽略的是：遮罩层的 height 和 width 必须基于视口单位（100vh/100vw），而不是百分比或 100%，否则在 iOS Safari 的地址栏收放过程中会错位或漏边。
