遮罩层需用 background-color: rgba(0,0,0,.7) 而非 opacity，配合 z-index 分层控制显隐，添加 touch-action: none 和 100vh/100vw 尺寸，并在 ios 中动态控制 body overflow 与 overscroll-behavior。
遮罩层不是加个 background-color: rgba(0,0,0,.6) 就完事的——它得拦住点击、不吞事件、不穿透、不卡滚动，还得在 iOS 上老老实实听话。
为什么用 rgba 而不用 opacity
因为 opacity 会把整个子树都变透明，包括你放在遮罩层里的弹窗或菜单内容；而 rgba() 只作用于背景色本身，子元素完全不受影响。这对嵌套结构（比如 .overlay > .modal）特别关键——你就能放心用 flex 居中，不用再算 transform: translate(-50%, -50%)。
常见错误现象：
— 给 .overlay 设了 opacity: .6，结果里面的按钮也半透明、文字发虚
— 点击按钮没反应，其实是 opacity 导致 pointer-events 间接失效（尤其旧版 Safari）
实操建议：
• 始终用 background-color: rgba(0,0,0,.7)，别碰 opacity
• 如果要兼容 IE9 及更早版本（极少见），才考虑 fallback 滤镜，但 2026 年基本可忽略
• 不要用 background: #0008 这类简写——部分安卓 WebView 对它解析不稳定
z-index 必须分层控制显隐，不能靠 display
遮罩层一旦设成 display: none，它就彻底退出渲染流，JS 切换时会有布局抖动，且 iOS Safari 下可能触发意外重绘。正确做法是用 z-index 把它“藏到背后”，同时保持 DOM 存活。
实操建议：
• 默认状态：.overlay { z-index: -1; }
• 激活时：.overlay.active { z-index: 980; }
• 主内容区（如 #panel）z-index 必须低于激活态遮罩，比如设为 970
• 遮罩层父容器（如 body）不要设 overflow: hidden——那是给主内容防滚动穿透用的，不是给遮罩的
iOS 上点击穿透和滚动锁死的两个硬坑
哪怕 rgba 和 z-index 都对了，iOS Safari 还可能让你白忙活：点遮罩没反应，或者一打开菜单页面就卡死不能滚。
实操建议：
• 遮罩层必须加 touch-action: none，否则 iOS 可能跳过 click 直接触发 tap，导致事件穿透到下层
• 打开菜单时，立刻给 body 加 overflow: hidden；关闭时务必同步移除——漏掉这一步，页面就永远滚不了
• 遮罩层上禁止设 pointer-events: none（除非你真想让它完全不可点），默认 auto 即可
• 如果菜单内容区自带滚动，它的容器必须设 overscroll-behavior: contain，不然滑到底还会拖拽背景页
最易被忽略的一点：遮罩层的 height 和 width 必须覆盖视口全尺寸，但不能只写 100%。iOS 状态栏高度会让 100% 漏掉顶部，稳妥写法是 height: 100vh; width: 100vw;，再补一句 min-height: -webkit-fill-available;。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
