模态弹窗必须用 position: fixed 吗？
不是必须，但绝大多数场景下非它不可。用 absolute 容易被父容器的 overflow: hidden 或 transform 截断，滚动页面时弹窗还会跟着动——这根本不是“模态”该有的表现。
关键点在于：fixed 脱离文档流、相对于视口定位，才能稳住位置。但要注意：iOS Safari 在软键盘弹出时会错误重设 fixed 元素位置，所以别把输入框放在弹窗顶部又指望它始终可见。
- 确保父级没有
transform、perspective或filter，否则会创建新的定位上下文，让fixed变成相对该容器定位 - 移动端建议加
min-height: 100vh防止内容少时弹窗高度塌缩 - 不要依赖
top: 50%; transform: translateY(-50%)做垂直居中——当弹窗内容高度超过视口，用户会无法滚动看到底部
z-index 层叠失效的常见原因
写个 z-index: 9999 却盖不住导航栏？大概率是层叠上下文（stacking context）在作怪。父元素一旦有 opacity、transform、filter 或 will-change，就会创建新层叠上下文，子元素的 z-index 只在内部比大小。
检查顺序比调数字更重要：
立即学习“前端免费学习笔记（深入）”；
- 先确认弹窗和遮罩层（overlay）是否同属一个层叠上下文；如果不是，再高的
z-index也赢不了父级的低值 - 遮罩层（通常是个
div.overlay）必须和弹窗同级或更早出现在 DOM 中，且z-index比弹窗小但比页面其他内容大 - 避免全局设
* { z-index: 0 }—— 这会强制所有元素创建层叠上下文，后患无穷
如何让模态弹窗真正“模态”（阻止背景交互）
视觉挡住不等于功能模态。用户仍能点击、聚焦、滚动背景内容，除非你主动干预。
- 遮罩层必须覆盖整个视口：
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，不能只靠100% - 给
body加overflow: hidden阻止滚动，但记得关闭时恢复；iOS 上还要额外处理touchmove事件防止穿透 - 焦点管理容易被忽略：打开弹窗后，用
element.focus()把焦点移到第一个可交互元素（如关闭按钮），并监听Tab键循环限制在弹窗内 - 按
Esc关闭是基本操作，但注意别让快捷键和编辑器/表单冲突（比如在textarea里按 Esc 不应关闭弹窗）
移动端适配最容易翻车的三个细节
PC 上跑得飞起的弹窗，到手机上可能错位、卡死、点不中——不是 CSS 写错了，是设备特性没兜住。
- 使用
viewport元标签时，别加user-scalable=no，否则 iOS Safari 会禁用双指缩放，导致fixed元素定位异常 - 遮罩层点击区域要够大，
min-height: 100vh+min-width: 100vw比单纯100%更可靠，尤其在横屏切换时 - 避免在弹窗内用
height: 100%布局内容——Safari 的视口高度会随地址栏显隐变化，导致内容被裁切或留白
最麻烦的从来不是怎么让它出现，而是怎么让它不抢焦点、不挡输入、不崩布局、不误触——这些都得在真实设备上点几遍才看得见。