绝大多数场景下必须用 position: fixed；absolute 会因相对定位祖先导致滚动时遮盖失效，fixed 才能视口级覆盖，但需设全方向偏移以支持 flex 居中。
overlay 用 position: fixed 还是 position: absolute？
绝大多数场景下必须用 position: fixed。用 absolute 容易掉进「滚动时遮不住内容」的坑——它相对于最近的 position: relative 祖先定位，一旦父容器有相对定位或页面内容超出视口，overlay 就会随页面滚动而“断开”。fixed 才能真正钉在视口层面，覆盖滚动区域。
但要注意：如果 overlay 内部需要居中弹窗（.popup），且你用 flex 布局，fixed 容器必须显式设 top: 0; left: 0; right: 0; bottom: 0，否则 flex 的 justify-content 和 align-items 不生效。
- 别写
position: absolute; top: 0; left: 0; width: 100%; height: 100%—— 高度不随内容撑开，也挡不住滚动内容 - 别把 overlay 嵌套在
position: relative的卡片或模块里，除非你明确想让它只盖住那个模块 - 移动端 Safari 对
fixed+transform组合有渲染 bug，避免同时给 overlay 加transform: translateZ(0)
transition 不生效？大概率是动了 display 或没声明初始态
最常见错误：用 display: none → block 切换 overlay 显隐，然后加 transition: opacity 0.3s——动画完全不会动。因为 display 没有中间状态，浏览器直接跳变，连重绘都不触发。
正确做法是始终让元素在 DOM 中，只控制 opacity 和 pointer-events：
立即学习“前端免费学习笔记（深入）”；
- 初始态设
opacity: 0; visibility: hidden; pointer-events: none; - 显示时加 class 改为
opacity: 1; visibility: visible; pointer-events: auto; -
transition必须写在初始态规则里，比如#overlay { transition: opacity 0.25s ease, visibility 0.25s; } - 别依赖
visibility过渡——它本身不可插值，但配合opacity可防止点击穿透
为什么 iOS 上 overlay 动画卡顿或闪一下？
核心原因是 Safari 对合成层（compositing layer）的触发更保守。即使你写了 transform: translateY(0)，它也不一定升层；而 opacity 在 iOS 上若父容器有 transform 或 will-change 却没配 contain: layout paint，动画会被截断。
实操建议：
- 给 overlay 直接加
will-change: opacity;（仅在需要动画时加，不用时 remove） - 确保它的父级（通常是
<body>）没有意外的transform或filter，否则可能干扰合成 - 避免在 overlay 上用
height或width过渡——它们触发重排，iOS 渲染管线更敏感 - 测试时关掉「减少动画」系统设置，否则
prefers-reduced-motion会禁用所有 transition
JS 控制过渡结束时，transitionend 事件怎么防抖和精准捕获？
一个 overlay 同时过渡 opacity 和 transform，transitionend 会触发两次。不加判断就执行关闭逻辑，容易误操作。
关键点：
- 用
e.propertyName === 'opacity'做守卫，而不是监听任意属性 - 务必加
{ once: true }选项，否则重复 toggle 会不断叠加监听器 - 如果 overlay 是通过 JS 插入的（比如
document.body.appendChild(overlay)），首次添加后立刻加 class 触发动画，浏览器可能来不及注册 transition，需加void overlay.offsetWidth强制同步布局 - 不要用
setTimeout代替transitionend——设备性能差异会导致时间不准，尤其低端安卓机
真正麻烦的不是写几行 CSS，而是 overlay 的过渡效果要同时满足：视觉上不突兀、滚动时全覆盖、iOS 不掉帧、JS 状态不紊乱。这些细节堆叠起来，才决定用户是否觉得“这个弹窗很顺”。
