优先用position: fixed，因其脱离文档流、以视口为基准，不随滚动偏移，不受父容器transform等影响；居中推荐fixed+flex组合，即top/right/bottom/left设0后display: flex并justify-content/align-items居中。
遮罩层用 position: fixed 还是 position: absolute？
优先用 position: fixed。它不依赖父容器，天然脱离文档流，能稳定覆盖整个视口，不管页面有没有滚动、父元素有没有 transform 或 perspective，都不会偏移或缩放失效。position: absolute 容易被最近的定位祖先干扰，尤其在 Vue/React 动态组件或嵌套 transform 的布局里，居中会突然失准。
怎么写 CSS 才真正在所有屏幕下水平垂直居中？
别用 top: 50%; left: 50%; transform: translate(-50%, -50%) 单独撑场面——它在 iOS Safari 某些版本（如 iOS 15.4）配合 viewport 缩放时可能抖动；更稳妥的是组合使用：
-
top: 0; right: 0; bottom: 0; left: 0铺满视口 -
margin: auto+width和height（或max-width/max-height）触发块级居中 - 外层加
display: flex; justify-content: center; align-items: center最省心，兼容性到 IE11 都稳
示例：
.modal-overlay {<br> position: fixed;<br> top: 0; right: 0; bottom: 0; left: 0;<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> background: rgba(0,0,0,0.7);<br>}
移动端键盘弹出时遮罩层被顶上去怎么办？
这是 iOS Safari 的经典 bug：软键盘弹起 → 视口高度收缩 → fixed 元素错位。不能靠监听 resize（太迟且不可靠），正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 给遮罩层加
min-height: 100vh（不是100%），确保最低撑满原始视口 - 避免在遮罩内部放
input或textarea；如有，聚焦前手动scrollIntoView({ behavior: 'smooth', block: 'center' }) - 关键：用
visualViewportAPI 动态修正（仅现代浏览器），例如：visualViewport.addEventListener('resize', () => overlay.style.height = visualViewport.height + 'px')
z-index 层级冲突导致遮罩被盖住怎么查？
常见于第三方库（比如某些 UI 组件库的 Popover 或 Tooltip）默认 z-index 设得过高，或父元素用了 transform 创建了新的 stacking context。排查顺序：
- 用浏览器开发者工具检查遮罩层的 computed
z-index和 stacking context 树 - 确认遮罩父级没意外设置
transform、opacity、filter等触发新层叠上下文的属性 - 直接给遮罩设
z-index: 2147483647（最大安全整数）临时验证是否层级问题 - 统一管理：定义 CSS 变量如
--z-modal: 1000，所有模态类都基于它计算，避免魔数散落
真正麻烦的不是居中本身，而是当遮罩要承载表单、拖拽、或者嵌套子遮罩时，transform 和 fixed 的交互、iOS 键盘行为、以及 stacking context 的隐式创建，这些点一旦漏掉一个，就不是“差一点”，而是“完全不对”。
