fixed元素百分比宽高失效主因是transform等属性创建新包含块，使参照对象变为父容器而非视口；应避免祖先元素设置transform，优先使用top/bottom/left/right四值定位替代width/height+calc或vh。
fixed 元素用百分比 width/height 为什么经常失效
position: fixed 的宽高百分比是相对于视口（viewport）计算的，但前提是它的包含块必须是根元素（html）。问题常出在父容器设置了 transform、perspective 或 filter，这会让浏览器创建新的包含块，导致百分比参照对象变成该父容器而非视口——此时 width: 100% 可能只占父容器宽度，而不是屏幕宽度。
- 确保 fixed 元素没有被带
transform的祖先包裹（检查 DOM 结构和 computed styles） - 不要依赖父级
width: 100%来“传递”视口宽度；fixed 元素应直接脱离文档流计算 -
height: 100%在 fixed 元素上生效的前提是：视口有明确高度，且无滚动干扰（比如 iOS Safari 中 viewport height 可能随地址栏隐藏变化）
calc() 处理 fixed 元素左右/上下留白的典型写法
需要让一个 position: fixed 元素避开左侧导航栏（比如 240px 宽）并撑满剩余区域？别用 left: 240px; width: calc(100% - 240px) —— 这在缩放或某些安卓 WebView 下可能因像素舍入错位。
- 推荐用
left: 240px; right: 0;配合width: auto（默认），由浏览器自动计算宽度，更稳定 - 若需精确控制（如留出右侧工具栏 60px），用
left: 240px; right: 60px;，而非width: calc(100% - 300px) - 垂直方向同理：
top: 50px; bottom: 0;比height: calc(100vh - 50px)更可靠，尤其在移动端地址栏显示/隐藏时
vh/vw 单位在 fixed 元素中要注意的兼容性细节
100vh 理论上等于视口高度，但在 iOS Safari 和部分安卓浏览器中，地址栏展开/收起会动态改变 vh 值，导致 fixed 元素突然跳动。
- 避免用
height: 100vh做固定高度布局；改用top: 0; bottom: 0; - 若必须用
vh（比如全屏背景图），加一层防抖逻辑：监听resize，延迟 100ms 后重设，或用min-height: 100vh+height: auto组合兜底 -
vmax/vmin在 fixed 场景下极少用，除非做横竖屏自适应弹窗，但要注意老版本 UC 浏览器不支持
移动端 fixed 元素“粘滞”或“抖动”的真实原因
很多开发者以为是 CSS 写错了，其实是浏览器对 fixed 定位的渲染策略差异：iOS Safari 默认将 fixed 元素提升为合成层，但若同时存在 will-change: transform 或频繁 scroll 触发重绘，会导致位置计算滞后一帧。
立即学习“前端免费学习笔记（深入）”；
- 不要给 fixed 元素加
transform: translateZ(0)强制硬件加速（除非真有性能瓶颈），它反而可能破坏 fixed 的定位锚点 - 如果 fixed 导航栏在滚动时抖动，检查是否同时设置了
body { overflow-y: scroll }—— 这会让 body 产生滚动，fixed 元素实际相对于 body 定位（非视口） - 真实解法：确保
html, body { height: 100%; overflow: hidden }，滚动容器换为内部div.scroll-container
fixed 元素的自适应不是靠“算得更准”，而是靠减少对动态视口单位的依赖、绕过浏览器渲染边界条件。最稳的方案，往往是用 top/bottom/left/right 四值定位，而不是 width/height + 百分比或 calc。
