遮罩层需用position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;确保覆盖全视口，background-color用rgba避免子元素透明，弹窗须fixed定位+更高z-index并脱离文档流，同时处理滚动穿透、焦点管理及移动端vh兼容性问题。
遮罩层 .overlay 必须覆盖整个视口且不可交互
遮罩层不是简单加个 background-color 就完事。它得撑满整个可视区域，否则弹窗边缘可能露出底层内容。常见错误是只设 width: 100%; height: 100%，但没考虑滚动高度或父容器限制。
- 正确做法：用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，确保不随滚动偏移 - 必须加
pointer-events: none;吗？不，遮罩本身要拦截点击（比如点击关闭），所以应保留pointer-events: auto;；但若内部无按钮，又想透传点击，才设为none - 透明度别用
opacity: 0.5直接降级——它会让子元素（如弹窗）也变半透明。改用background-color: rgba(0, 0, 0, 0.5)
弹窗容器需脱离文档流并显式声明 z-index
弹窗如果用 position: relative 或默认 static，会受父级堆叠上下文压制，再高的 z-index 也无效。关键在于「脱离流 + 独立堆叠上下文」。
- 必须设
position: fixed或absolute（推荐fixed，不受滚动影响） -
z-index值不能孤立写，得确保其父级没有创建更小的堆叠上下文（比如父级有z-index且非auto） - 常见陷阱：遮罩层
z-index: 100，弹窗设z-index: 99—— 结果弹窗被压在遮罩下。两者应属同一上下文，弹窗值必须更高，例如z-index: 101 - 建议统一管理层级：定义 CSS 变量如
--z-overlay: 100; --z-modal: 110;，避免魔数
弹窗内容区需防滚动穿透与焦点逃逸
用户打开弹窗后滚动鼠标，页面底层仍可能滚动——这不是视觉错觉，是真实行为缺陷。同时键盘 Tab 若能切到弹窗外，会破坏可访问性。
- 遮罩激活时，给
<body>加overflow: hidden，但注意：这会导致页面“跳动”，因滚动条消失后宽度变化。补救：记录document.body.style.paddingRight = window.innerWidth - document.documentElement.clientWidth + 'px'; - 焦点管理必须手动处理：
focusable元素（如按钮、输入框）应在弹窗内循环；首次打开时focus()到第一个可聚焦元素；关闭时恢复原焦点 - 不要依赖
tabindex="-1"就以为安全——它只是让元素可编程聚焦，不解决 Tab 键逃逸问题。要用keydown捕获Tab并手动重定向
移动端适配中 position: fixed 的兼容性雷区
iOS Safari 在地址栏收起/展开时，100vh 会误判视口高度，导致遮罩留白或溢出。Android 部分 WebView 对 fixed 定位响应延迟，出现“闪一下再定位”。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：不用
100vh，改用min-height: 100%;+height: 100%;配合html, body { height: 100%; }，再结合 JS 动态设置style.height = window.innerHeight + 'px' - iOS 上
fixed元素内滚动卡顿？加-webkit-overflow-scrolling: touch;到可滚动容器，并确保弹窗有transform: translateZ(0)触发硬件加速 - 慎用
inset: 0（等价于top/left/bottom/right: 0）—— Safari 15.4 之前不支持，老版本直接失效
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
}
<p>.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 110;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}遮罩和弹窗的层级关系看着简单，实际最常崩在堆叠上下文嵌套和移动端视口计算上。别信“写了 z-index 就一定在上面”，先确认它们是不是在同一个堆叠上下文中。
