因为position: fixed元素默认宽高由内容决定，漏写定位值时浏览器按auto渲染导致宽高为0；必须显式设inset: 0或top/right/bottom/left: 0，并避免父容器创建新层叠上下文、ios视口变化及pointer-events设置错误。
为什么只写 position: fixed 遮罩会缩成一个点
因为 position: fixed 元素默认尺寸由内容决定，不是自动铺满视口。漏写定位值时，浏览器按 top: auto; left: auto; right: auto; bottom: auto 渲染，结果就是宽高为 0 —— 看不见也点不中。
- 必须显式指定位置：推荐用
inset: 0（语义清晰、不易漏边），现代浏览器支持良好（Chrome 89+、Firefox 63+、Safari 14.1+） - 兼容旧版 Safari 或 IE？并行写
top: 0; right: 0; bottom: 0; left: 0，浏览器会优先采用inset - 别用
width: 100vw; height: 100vh—— iOS Safari 中100vh会把地址栏高度算进去，滚动时遮罩底部露白
遮罩盖不住弹窗或按钮的真正原因
不是 z-index 不够大，而是父容器意外创建了新层叠上下文（stacking context），把遮罩“关”在局部层级里。
- 触发条件包括：
transform（哪怕只是transform: translateZ(0)）、opacity、filter、will-change - 检查方式：用 DevTools 的 Computed 面板搜索这些属性，出现在遮罩任意祖先上都可能出问题
- 最稳妥解法：把遮罩 DOM 直接插入
document.body，绕开所有中间容器干扰 -
z-index要设够高（如9999），且不能依赖默认值；同时确保遮罩和目标元素不在同一个层叠上下文起点内
移动端滚动时遮罩抖动或错位怎么稳住
iOS Safari 对 position: fixed 的重绘不敏感，地址栏收起/展开、键盘弹出、横竖屏切换都会导致遮罩偏移或漏底——这不是写法错，是浏览器行为缺陷。
- 禁用底层滚动：激活遮罩时加
document.body.style.overflow = 'hidden'，关闭时恢复 - 防抖动兜底：监听
scroll和resize，触发时强制重排：document.body.style.transform = 'translateZ(0)'，再立刻设回'none' - 避免用
bottom: 0做定位 —— iOS 对fixed + bottom支持不稳定，统一用inset: 0或四边0 - 若遮罩内含输入框，需监听
focusin临时提升z-index，否则软键盘可能把它顶出视图
遮罩居中和点击穿透的常见陷阱
很多人把弹窗塞进遮罩里，用 margin: auto 或 top: 50%; transform: translateY(-50%)，但实际效果常失效。
-
margin: auto在fixed容器里无效（块级元素垂直不居中）；推荐遮罩本身设display: flex; justify-content: center; align-items: center - 遮罩默认响应点击，但引导页通常只需视觉阻断：加
pointer-events: none，再给内部按钮/关闭图标单独设pointer-events: auto - 背景必须用
background-color: rgba(0,0,0,0.6)，别用opacity—— 后者会让内部内容也变透明 - 隐藏遮罩别用
opacity: 0或visibility: hidden，它们仍占位响应事件；该用display: none或直接移除 DOM
body、避开 transform、撑满视口、禁用滚动、分层控制事件。任何一环松动，移动端就容易出问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
