fixed元素未覆盖全屏是因body默认margin及滚动条影响视口计算；应重置html/body margin，用inset:0替代四方位定位，并处理iOS动态vh及祖先层叠上下文干扰。
fixed 元素没覆盖全屏，是因为没重置默认 margin 和 scroll 间距
浏览器 body 默认有 margin（通常 8px），且页面可能有滚动条导致视口宽度变化。即使设了 top: 0; left: 0; width: 100vw; height: 100vh;，仍可能漏掉边缘或被滚动条挤偏。
- 用
width: 100vw; height: 100vh;而非100%，避免继承父容器高度限制 - 加
margin: 0;到html和body，消除默认外边距 - 为防滚动条占位导致
100vw不足，可改用width: 100%; height: 100%;并配合position: fixed;+inset: 0;（现代写法）
滚动时浮层抖动或错位，大概率是用了 absolute 而非 fixed
position: absolute 依赖最近的定位祖先，一旦页面滚动或祖先元素重排，位置就不可控；fixed 才真正相对于视口固定。但要注意：如果父元素设置了 transform、perspective 或 filter，会创建新的 containing block，使 fixed 失效，退化为 relative 行为。
- 检查浮层父级是否含
transform: translateX(0)等声明，临时删掉验证 - 确保浮层直接挂载在
下，或至少祖先链无transform/will-change - 必要时用
position: fixed; inset: 0;替代四方位分别写top/left/bottom/right，更简洁且不易遗漏
移动端 Safari 中浮层盖不住地址栏，需处理 viewport 高度波动
iOS Safari 的地址栏收放会动态改变 vh 值（比如从 100vh → 105vh），导致浮层高度忽大忽小甚至留白。单纯用 100vh 不可靠。
- 用 JS 动态设置高度：
document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px');，CSS 中写height: calc(var(--vh, 1vh) * 100); - 或改用
min-height: 100dvh;（dvh是动态视口单位，Safari 16.4+ 支持） - 避免在浮层内使用
overflow: auto+ 长内容，否则 iOS 可能触发“弹性拖拽”，让浮层短暂移位
:root {
--vh: 1vh;
}
.fullscreen-overlay {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
}
/ 兼容 iOS 动态视口 /
@media (orientation: portrait) and (max-device-width: 768px) {
.fullscreen-overlay {
height: calc(var(--vh, 1vh) * 100);
}
}
最常被忽略的是 z-index 层级和祖先 stacking context 的干扰——哪怕写了 z-index: 9999，如果父容器有 transform 或 opacity ，就会创建新层叠上下文，把子元素的 z-index 锁死在内部。这时候得把浮层提一级，直接插到 body 底部。
