Modal全屏遮罩未覆盖整个视口，主因是position:fixed失效于新层叠上下文（如transform/overflow:hidden父容器）；应设fixed+100vw/100vh，并检查祖先属性。
Modal 全屏遮罩为什么没盖住整个视口
常见现象是 background-color 只覆盖了内容区域，滚动时遮罩跟着动，或者底部留白。根本原因是遮罩层没脱离文档流，或父容器有 overflow: hidden / transform 等触发新层叠上下文的属性，导致 position: fixed 失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层（如
.modal-overlay）必须用position: fixed，且top: 0; left: 0; width: 100vw; height: 100vh;—— 注意不是100%，否则依赖父高 - 检查它所有祖先元素是否设置了
transform、perspective、filter或will-change，这些会让fixed相对于该祖先定位而非视口 - 若页面本身有横向滚动，
width: 100vw可能被滚动条挤窄；稳妥写法是width: 100%; min-width: 100vw;
Modal 内容窗口居中失效的几种典型原因
居中逻辑看似简单，但实际常因盒模型、单位混用或渲染时机出错。最稳妥的是 Flex + position: fixed 组合，而非纯 margin: auto 或 top: 50% + transform。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给遮罩层设
display: flex; align-items: center; justify-content: center;，再把窗口作为子元素 —— 这种方式不依赖尺寸、不触发重排，兼容性好（IE11+） - 避免用
top: 50%; left: 50%; transform: translate(-50%, -50%);：如果窗口内有动态内容（比如异步加载的图片），初始高度为 0，会导致错位；且 IE 中transform可能引发模糊 - 如果必须用绝对定位，请确保父（遮罩层）有明确宽高，并加
box-sizing: border-box;防止 padding/border 影响计算
Modal 出现后页面还能滚动？
遮罩生效了，但背后内容仍可滚，说明 body 滚动未被抑制。这不是 Modal 自身的问题，而是交互控制遗漏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开 Modal 时，给
body加overflow: hidden;，同时记录当前scrollY，关闭时恢复；别只靠position: fixed压制 - 注意移动端：iOS Safari 对
body { overflow: hidden }支持不稳定，更可靠的做法是给html加height: 100%; overflow: hidden;，并用body { position: fixed; top: -${scrollY}px; width: 100%; }锁定位置 - 如果 Modal 是通过 Vue/React 动态挂载，确保样式在组件 mount 后立即生效，避免闪动或短暂可滚
z-index 层级混乱导致 Modal 被其他元素穿透
遮罩或窗口被导航栏、广告位、第三方 SDK 插入的浮层盖住，错误提示通常是「明明设了 z-index: 9999 却没用」——问题不在数值大小，而在层叠上下文（stacking context）隔离。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认遮罩层和窗口是否在同一个层叠上下文中；如果某个祖先（比如
#app）有z-index且非auto，它就创建了新上下文，内部z-index只在该上下文内比较 - 把遮罩层直接挂到
document.body下（而不是嵌套在某个组件内部），是最简单有效的解法 - 避免无意义地堆砌超大
z-index（如 999999），优先理清结构层级；现代项目建议用 CSS 自定义属性统一管理，比如--z-modal: 1000;
复杂点在于多个框架共存时，比如 React 应用里嵌了 Web Component，后者可能自带 shadow DOM 和独立样式作用域，这时候 position: fixed 的行为会受 shadow root 边界影响，得额外处理出口渲染逻辑。
