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