position: fixed遮罩层需设top:0;left:0;width:100vw;height:100vh，否则仅覆盖内容尺寸；注意移动端safari对100vh解析不准，建议min-width:100vw;min-height:100vh；避免祖先元素触发新层叠上下文（如transform、opacity
position: fixed 遮罩层没设 top/left/width/height
遮罩层只写了 position: fixed，但没配 top: 0、left: 0、width: 100vw、height: 100vh，它默认宽高是内容尺寸，自然只盖住一小块。用 100% 也不行——fixed 元素的百分比高度参考的是视口，但 100% 实际会退化为内容高度，尤其当父元素没显式高时。
实操建议：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须写全：
top: 0; left: 0; width: 100vw; height: 100vh; - 移动端 Safari 对
100vh解析不准（含地址栏），稳妥写法是：min-width: 100vw; min-height: 100vh; - 如果页面有横向滚动条，
100vw会被挤窄，可加width: 100%; min-width: 100vw;兜底
祖先元素触发了新层叠上下文
遮罩层父容器（比如 或某个 wrapper）用了 transform、filter、perspective、will-change 或 opacity ，会让 <code>position: fixed 失效——它不再锚定视口，而是锚定这个新上下文的边界框，导致遮罩偏移或缩在局部。
实操建议：
- 用浏览器开发者工具检查遮罩层所有祖先，逐个关闭
transform等属性看是否恢复 - 把模态框直接挂到
document.body底部，绕过可疑父容器 - 避免在
上设transform: scale(1)这类“无意义但有害”的样式
html/body 没撑满视口高度
遮罩层用了 height: 100%（错误写法），而 和 默认没占满视口，导致 100% 参考值极小。常见于未重置默认 margin/padding 的页面，或未声明根高。
实操建议：
- 强制根高：
html, body { height: 100%; margin: 0; padding: 0; } - 不依赖
100%做遮罩，优先用100vw/100vh；若必须用%，确保 html/body 已继承视口高 - 注意：某些 CMS 或框架会在
上插入内联 style，覆盖你的 CSS，需用!important或更高权重选择器
z-index 层级被截断或冲突
遮罩层明明存在，却看不见，或者被其他元素压住，大概率是 z-index 生效范围被限制在某个层叠上下文中——比如它的父容器本身有 transform，且设置了 z-index，子元素的 z-index 就只在这个父容器内部比较，无法越过它影响全局层级。
实操建议：
- 遮罩层设
z-index: 1000，模态框本体设z-index: 1001，保持严格递进 - 检查遮罩层所有祖先是否带
transform、opacity 、<code>filter—— 这些都会创建新层叠上下文，让 z-index “失效” - 不要用
z-index: 9999这种魔数，统一用 CSS 变量管理，比如--z-modal: 1000
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
