position: fixed 是全屏居中弹出层的起点，因其脱离文档流、相对视口定位且不受滚动影响；需配合 top: 50%、left: 50% 和 transform: translate(-50%, -50%) 才真正居中。
为什么 position: fixed 是全屏居中弹出层的起点
因为只有 fixed 能让元素脱离文档流、相对于视口定位，不受滚动影响——这是“全屏”和“始终可见”的前提。用 absolute 会随父容器偏移或滚动消失，sticky 则根本不适合模态层场景。
常见错误是只设 top: 50% 和 left: 50%，结果弹出层左上角在屏幕中心，整体偏右下；或者忘了加 transform: translate(-50%, -50%) 校正自身尺寸偏移。
-
fixed必须配合top/left+transform才真正居中，缺一不可 - 不设
width和height时，内容撑开尺寸，居中逻辑依然成立 - 若弹出层内含
position: absolute子元素，它们的参考系仍是视口，不是弹出层本身
z-index 不生效？先检查这三件事
z-index 失效不是它坏了，而是层叠上下文（stacking context）被意外创建了。最常踩的坑：父容器有 opacity、filter、transform（哪怕只是 transform: none），都会触发新层叠上下文，把子元素的 z-index 锁死在内部。
典型现象：modal 层明明设了 z-index: 9999，却被一个 header 盖住，而 header 的 z-index 只有 10。
- 确保弹出层的祖先节点没有无意中创建层叠上下文（查
opacity、filter、transform、will-change） -
z-index只对position值为relative、absolute、fixed、sticky的元素生效 - 不要依赖超大数字（如
z-index: 999999），优先理清层叠结构；一般100（遮罩）、101（弹出层）就足够
遮罩层（overlay）怎么写才不卡顿、不挡交互
遮罩层本质是 fixed 全屏块，但很多人直接用 div + background-color，结果滚动时闪烁，或点击穿透到背后元素。
关键点在于：遮罩必须阻断鼠标事件，同时不能引发重排重绘抖动。
- 遮罩层设
pointer-events: none是错的——它会让点击直接穿过，失去“禁用背景”的作用；正确做法是pointer-events: auto+background-color: rgba(0,0,0,0.5) - 避免用
height: 100vh，它在移动端 Safari 中可能因地址栏缩放导致高度不全；改用min-height: 100vh更稳妥 - 加
will-change: opacity对淡入动画有帮助，但仅在需要过渡时加，不用常驻
移动端 Safari 下的滚动穿透问题
iOS Safari 在弹出层打开时，如果背景可滚动，手指在弹出层上滑动仍会带动页面滚动——这不是 bug，是它的默认行为。用户根本没意识到自己划到了背后页面。
解决思路不是阻止所有 touchmove（那会废掉弹出层内滚动），而是精准锁定 body 滚动。
- 打开弹出层时给
body加overflow: hidden，关闭时恢复；注意保存原有overflow值，别粗暴写死 - 不要用
position: fixed锁定body（比如设top: 0），会导致页面跳动；overflow: hidden就够了 - 如果弹出层自身需要滚动，确保其
max-height和overflow-y: auto正确设置，且不继承 body 的隐藏状态
transform 或加 filter 都可能悄悄干掉 z-index 的层级关系，而 Safari 的滚动穿透只在真机上露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
