position: fixed 是模态弹窗首选定位方式，因其脱离文档流、固定视口且不受滚动影响；absolute 易受父容器 transform 等属性干扰导致错位。
为什么 position: fixed 是模态弹窗的首选定位方式
因为只有 fixed 能让弹窗真正脱离文档流、固定在视口内，不受滚动影响。用 absolute 时，一旦父容器设置了 transform、perspective 或 filter，它就会变成相对该容器定位，导致遮罩错位或弹窗飘走——这是最常被忽略的兼容性陷阱。
实操要点：
-
top: 0; left: 0; width: 100vw; height: 100vh;确保覆盖整个可视区域（注意不是100%，否则可能漏掉滚动条宽度） - 必须显式设置
z-index，且值要足够大（如z-index: 1000），避免被第三方 UI 库（如 Ant Design 的z-index: 100）意外压住 - 给
body加overflow: hidden防止背景滚动（但别忘了关闭时恢复）
遮罩层和内容层的 z-index 怎么分层才不打架
遮罩层（overlay）和弹窗内容（modal-content）必须是两个独立元素，且 z-index 必须严格递进。常见错误是把两者写成父子关系又共用一个 z-index，结果遮罩盖不住内容里的 select 或 iframe。
推荐结构与层级：
- 遮罩层：
z-index: 1000，背景半透黑（background: rgba(0,0,0,0.5)），cursor: pointer用于点击关闭 - 内容层：作为遮罩的子元素，
z-index: 1001，加pointer-events: auto（遮罩默认pointer-events: auto，但若遮罩设了pointer-events: none就得手动补） - 避免用
z-index: 9999这类魔数，改用 CSS 变量统一管理，比如--z-modal-overlay: 1000; --z-modal-content: 1001;
点击遮罩关闭弹窗时，如何防止误触内部表单控件
直接给遮罩绑 click 关闭逻辑，会触发事件冒泡到按钮、输入框等子元素，导致点输入框也关窗。这不是 bug，是预期行为。
安全做法：
- 监听遮罩的
click，但只在e.target === e.currentTarget时关闭（即点击的是遮罩本体，不是它里面的子节点） - 或者给内容层加
pointer-events: none，再单独给每个可交互子元素（如button、input）设pointer-events: auto - 更稳妥的是用
event.composedPath()判断点击路径是否包含内容层，但需注意 Safari 旧版本兼容性
移动端适配时 position: fixed 的几个硬伤怎么绕
iOS Safari 在软键盘弹出时，fixed 元素会“粘”在页面顶部不动，导致遮罩上移、内容层错位。这不是 CSS 能修的，是浏览器渲染机制问题。
缓解方案：
- 检测
focus事件，临时把弹窗切为position: absolute并动态计算top（基于window.scrollY） - 对
textarea和input[type="text"]做特殊处理，聚焦时用scrollIntoView({ block: 'nearest' })把输入框拉进视口 - 放弃全屏遮罩，改用
min-height: 100dvh+scroll-behavior: smooth控制主体滚动，只固定内容层
真正难搞的从来不是怎么写出来，而是 iOS 键盘收起后 fixed 元素不自动回位——这时候只能监听 resize 或 scroll 做兜底重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
