弹窗用 position: fixed 无法覆盖全屏，主因是 html 或 body 未撑满视口且存在 overflow: hidden 等截断样式；需设 html, body { height: 100%; margin: 0; padding: 0; min-height: 100vh; }，遮罩与弹窗应分层独立定位，弹窗开启时动态设 body { overflow: hidden; } 并注意 iOS 兼容性。
弹窗用 position: fixed 覆盖不了全屏？检查 html 和 body 高度
直接设 top: 0; left: 0; width: 100%; height: 100% 不生效，大概率是 html 或 body 没撑满视口。fixed 元素的 100% 高度，是相对于其包含块（通常是初始包含块，即视口），但若父级有 overflow: hidden、height: auto 或被其他样式截断，就可能显示不全。
-
html, body { height: 100%; margin: 0; padding: 0; }是必须的起点 - 如果页面内容超长，且
body有默认min-height: auto，建议加min-height: 100vh更可靠 - 避免在
body上设overflow: hidden—— 它会裁剪fixed子元素（尤其在 Safari 中）
遮罩层和弹窗本体要分两层，别混在一个 div 里
很多人把遮罩（overlay）和弹窗（modal content）写在一个容器里，结果遮罩失效或层级错乱。正确做法是：遮罩用 fixed 占满全屏，弹窗再用 fixed 居中，两者独立定位、独立 z-index。
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1040; /* Bootstrap 的参考值，确保压住页面 */
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 500px;
z-index: 1050; / 必须比 overlay 高 /
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
移动端滚动穿透问题：弹窗出现时页面还能滚？
即使弹窗覆盖了视觉，body 仍可滚动，导致背景内容滑动 —— 这不是 fixed 失效，而是 body 自身还在响应 touchmove。解决方案不是靠 position，而是控制 body 的行为：
- 弹窗打开时加
body { overflow: hidden; position: relative; } - 关闭时务必恢复
overflow: visible（注意：不要只设auto，某些浏览器会保留滚动条占位） - 更稳妥的做法是用
document.body.style.overflow = 'hidden'动态控制，避免 CSS 类冲突 - iOS Safari 对
position: fixed+ 滚动的兼容性差，可加touch-action: none到遮罩层防误触
width: 100% 和 width: 100vw 的区别必须清楚
用 100% 时，宽度基于包含块（如 body 的 content box），而 body 可能有 margin 或被 box-sizing 影响；100vw 始终等于视口宽度，更准确，但也带来新问题：
立即学习“前端免费学习笔记（深入）”；
-
100vw包含垂直滚动条宽度（约 17px），在有滚动条时会右移溢出 → 解决：用width: 100%+ 确保html/body无 margin - 想严格贴边又兼容滚动条？可用
width: calc(100vw - var(--scrollbar-w, 0px))，但需 JS 检测并注入变量 - 简单项目优先用
100%+html, body { width: 100%; height: 100%; }
实际覆盖失败，八成卡在 html/body 高度或 overflow 设置上，而不是 position: fixed 本身。先查这两个地方，比调 z-index 有效得多。
