fixed遮罩层挡不住点击是因为z-index不足、缺少pointer-events:auto且未用inset:0；弹窗需三层嵌套+flex布局+min-height:0；iOS需禁用body滚动并预置DOM避免闪烁。
fixed 背景遮罩层为什么挡不住点击？
因为 fixed 元素默认层级不够，且未显式声明可交互区域。遮罩层（比如半透明黑背景）必须能拦截点击、阻止底层滚动，否则弹窗就“形同虚设”。
关键不是加 position: fixed，而是配齐三样：z-index、pointer-events: auto（别漏！）、inset: 0（比 top/left/bottom/right: 0 更稳）。
-
z-index至少设为1000起，避开框架默认值（如 Ant Design 常用1000，Element Plus 是2000） - 遮罩层必须写
pointer-events: auto—— 很多人以为默认就是，但一旦父容器有pointer-events: none或继承影响，它就失效 - 用
inset: 0替代四边分别设0，避免 Safari 下偶发渲染错位
absolute 弹窗内容如何固定头尾 + 中间滚动？
核心是“三层嵌套结构”：外层 absolute 定位弹窗容器 → 内层用 Flex 布局撑满 → 头尾设固定高度/弹性收缩，中间区域用 overflow-y: auto。
不能只靠 height: 100%，因为父级 absolute 容器若没明确尺寸，子元素百分比高度会失效。
立即学习“前端免费学习笔记（深入）”；
- 外层弹窗容器必须设
width和max-height（比如max-height: 90vh），否则在小屏下溢出不可控 - 内部用
display: flex; flex-direction: column，头部flex-shrink: 0，尾部同理，中间区域flex: 1; overflow-y: auto - 中间滚动区要加
min-height: 0（Chrome/Firefox 默认不收缩，不加这句滚动条可能不出现）
.modal-content {
display: flex;
flex-direction: column;
max-height: 80vh;
}
.modal-header, .modal-footer {
flex-shrink: 0;
}
.modal-body {
flex: 1;
overflow-y: auto;
min-height: 0;
}
滚动时背景页面还在动？
不是弹窗没锁住，是 body 滚动没禁用。只靠 overflow: hidden 在 iOS Safari 和部分安卓 WebView 下无效，还会引发回弹或定位偏移。
真正可靠的做法是：弹窗打开时，记录当前 scrollY，然后给 body 加 position: fixed 并设 top: -${scrollY}px；关闭时还原。
- 纯 CSS 的
body { overflow: hidden }在 iOS 上大概率失效，且会丢失滚动位置 - JavaScript 必须在
modal.open后立即执行，延迟哪怕 1 帧，用户都可能看到闪动 - 记得监听
resize，窗口缩放时重新校准body的top值
fixed 遮罩 + absolute 弹窗在 iOS 上闪一下？
这是 WebKit 渲染管线的已知问题：当 fixed 元素首次插入 DOM 时，若同时触发重排（如 JS 修改了其他元素尺寸），iOS Safari 会短暂“失焦”导致闪烁或错位。
解决思路不是优化动画，而是绕开首次渲染抖动。
- 遮罩层和弹窗容器在初始 HTML 就存在（
display: none），而非 JS 动态appendChild - 显示时只改
visibility: visible和opacity，配合transition，避免触发布局（layout） - 弹窗内容区域用
transform: translateZ(0)强制硬件加速，减少 iOS 渲染卡顿
复杂点不在布局逻辑，而在不同平台对 fixed 的实现差异——iOS 不认 inset 的某些边界行为，Android Chrome 对 transform 的 scroll anchoring 又太敏感。得按设备微调，不能一套样式走到底。
