position: fixed偏移非bug，而是定位基准从视口切换为祖先元素；根因有三：viewport缩放导致锚点漂移、祖先元素触发stacking context使fixed降级、100vw/100vh在ios中计算失准及软键盘压缩visual viewport。
position: fixed 偏移不是 bug，而是它在特定条件下自动切换了定位基准——从“相对于视口”变成“相对于某个祖先元素”。绝大多数偏移问题，都能归到三个明确可查、可修的根因。
viewport meta 标签不全导致锚点漂移
只写 <meta name="viewport" content="width=device-width"> 是不够的。iOS Safari 和部分安卓 WebView 在字体小、内容多或 DPR 高时，会悄悄缩放页面，让 fixed 元素的坐标系和实际渲染视口脱节。
- 必须同时包含：
width=device-width、initial-scale=1.0、maximum-scale=1.0（或user-scalable=no） - 横竖屏切换后偏移？补上
minimum-scale=1.0才能阻止浏览器内部重绘延迟干扰 - 真机测试比模拟器关键——模拟器常忽略缩放重算过程，而真机旋转瞬间就能复现偏移
祖先元素触发 stacking context 使 fixed 降级
只要任意父级设置了以下任一属性，position: fixed 就会退化为 relative 行为，定位基准变成该祖先：
-
transform（哪怕只是transform: translateZ(0)） -
overflow: hidden或overflow: auto -
filter、will-change、backdrop-filter、opacity
调试方法：在 DevTools 的 Elements 面板中，按住 Shift 连续点击右上角箭头向上跳父节点，每层切到 Computed 标签页搜 transform，看是否为 none。别信“我没写 transform”——第三方轮播图、弹窗组件内部默认加了 transform: translateX(0)。
100vw / 100vh 在 iOS 中含滚动条宽度或动态收缩
用 w-full 或 h-full 做 fixed 导航栏时，右边常溢出——因为 100vw 在 iOS 下等于屏幕物理宽度（含约 15px 滚动条），不是可用宽度。
- 改用
left-0 right-0替代w-full，等价于width: auto，更稳 - 避免
100vh做全屏遮罩：Safari 滚动时100vh会动态收缩，导致遮罩高度突变 - 横向居中类（如悬浮按钮）别用
right-0，改用left-1/2 -translate-x-1/2
软键盘弹出时 visual viewport 被压缩但 fixed 不响应
移动端键盘弹起时，浏览器把 fixed 锚定在被压缩/冻结的 visual viewport 底部，而该视口高度已变，但元素不会重算位置。
- 监听
focusin和blur，而非resize（iOS 上resize触发率低于 20%） - 临时切为
position: absolute+ 动态bottom计算：用window.innerHeight - inputRect.bottom，且加setTimeout(..., 0)确保 DOM 重排完成 - blur 后立刻恢复
position: fixed并清除 inline 样式：el.style.removeProperty('top')、el.style.removeProperty('bottom')
真正难的不是写对一行 CSS，而是意识到：当 fixed 偏移时，你面对的从来不是一个样式问题，而是一个定位上下文链断裂的问题——它可能卡在 viewport 缩放、祖先 transform、滚动条计算、visual viewport 动态变化中的任意一环。漏掉其中任何一个检查点，都会让修复变成盲调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
