模态框不必强制使用 position: fixed，但绝大多数场景下这是最稳妥的选择；它能脱离文档流、不随滚动移动、始终相对于视口定位，而 absolute 易受祖先定位或 transform 影响导致错位。
模态框必须用 position: fixed 吗？
不是必须，但绝大多数场景下这是最稳妥的选择。用 position: fixed 能让模态框脱离文档流、不随滚动条移动、始终相对于视口定位——这对遮罩层和居中弹窗最关键。若用 position: absolute，它会相对于最近的已定位祖先（position: relative/absolute/fixed）偏移，一旦父容器有滚动或变换，位置就容易错乱。
常见错误：给模态框容器加了 position: relative，再对子元素用 absolute 定位，结果模态框跟着父容器一起滚动或缩放。
- 遮罩层（overlay）必须用
fixed，否则无法全屏覆盖 - 内容框（modal-content）可配合
fixed+top/left或更现代的inset: 0+margin: auto - 如果整个页面有
transform（如动画、缩放），会创建新的包含块，导致absolute行为异常，此时fixed更可靠
top: 0; left: 0; 为什么模态框没贴满屏幕？
因为 top: 0; left: 0; 只控制定位起点，不控制尺寸。默认情况下，fixed 元素宽高由内容决定，不会自动撑满视口。
要实现全屏遮罩，需显式设置尺寸：
立即学习“前端免费学习笔记（深入）”；
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
}
注意：100vw 和 100vh 是关键。别用 100%，它在 fixed 下是相对于初始包含块（可能不是视口），且受 margin/padding 影响。
- 避免用
width: 100%; height: 100%;配合fixed—— 行为不可靠 - 移动端要注意
100vh在 Safari 中可能因地址栏显示/隐藏而跳变，可考虑min-height: 100vh+height: -webkit-fill-available作为补充
z-index 失效或层级错乱怎么查？
z-index 不是全局排序器，它只在同一个“层叠上下文”内生效。常见失效原因不是值设小了，而是无意中创建了新层叠上下文，把模态框关进了一个低优先级的“盒子”里。
典型陷阱：
- 父容器设置了
opacity 、transform、filter、will-change等属性 → 自动创建新层叠上下文，子元素的z-index只在这个上下文内比较 - 模态框被包裹在某个
position: relative+z-index: 10的卡片里，而该卡片本身z-index很低 → 整个模态框都被压在底层 - 多个
fixed元素之间比大小没问题，但若其中一个祖先有z-index，就得看它在整个层叠顺序中的位置
排查建议：打开浏览器开发者工具，选中模态框元素，看“Computed”面板里的 z-index 是否生效，再往上逐级检查祖先是否有创建层叠上下文的属性。
居中模态框内容，top/left 还是 inset/margin？
用 top: 50%; left: 50%; transform: translate(-50%, -50%); 是兼容性好、稳定可靠的方案。但现代 CSS 支持更简洁写法：
.modal-content {
position: fixed;
inset: 0;
margin: auto;
width: 400px;
height: 200px;
}
inset: 0 等价于 top: 0; right: 0; bottom: 0; left: 0，配合 margin: auto 会让块级元素在可用空间内自动居中（前提是宽高确定或 max-width/max-height 限制）。这个组合在 Chrome/Firefox/Safari（≥15.4）中表现一致。
- 不要依赖
top: 50%; left: 50%+margin负值，因为需要手动算尺寸 - 如果内容高度不固定，
transform方案仍更稳妥；inset + margin对高度自适应支持有限 - 务必确保父级（通常是遮罩层）没有
overflow: hidden或其他裁剪，否则居中后内容可能被截断
z-index 的隐式上下文、fixed 与 transform 的冲突、以及 vh 在不同浏览器中的渲染差异——这些细节不报错，但会让效果飘忽不定。 
