移动端 fixed 定位失效主因是浏览器对视口滚动、缩放及输入法弹出的特殊处理；需规范 viewport 设置、用 vh 替代百分比、监听 resize 动态调整、适配 safe-area、禁用 input 自动滚动，并优先考虑 sticky 替代方案。
固定定位（position: fixed）在移动端失效，常见于 iOS Safari 和部分安卓 WebView 中，根本原因不是 CSS 写错了，而是浏览器对视口滚动、缩放、输入法弹出等行为的特殊处理导致 fixed 元素脱离预期位置。单纯加 top、left 不够，必须配合 viewport 设置与行为兜底策略。
检查并规范 viewport meta 标签
移动端 fixed 定位依赖浏览器对视口的正确定义。若 viewport 设置不当（如允许缩放、宽度不匹配设备），fixed 元素会随缩放或滚动“漂移”。
- 确保使用标准 viewport 声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 避免
user-scalable=yes或动态修改 scale —— iOS Safari 在缩放后会重置 fixed 元素的渲染锚点 - 若需缩放支持，改用
touch-action: manipulation配合 pinch-zoom 的 JS 控制，而非放开 viewport 缩放
规避 iOS Safari 的“地址栏遮挡”问题
iOS Safari 滚动时地址栏收起/展开会触发视口高度突变，导致 fixed 元素错位（尤其 bottom: 0 的按钮或导航栏）。这不是 bug，是视口高度被动态重算的结果。
- 用
vh单位替代100%：比如height: 100vh比height: 100%更稳定（但注意 iOS 旧版 vh 有兼容性，可加 fallback） - 监听
resize事件，动态更新 fixed 元素的 top/bottom 值：window.addEventListener('resize', () => { el.style.top = window.innerHeight - el.offsetHeight + 'px'; }); - 对底部 fixed 元素，优先用
bottom: env(safe-area-inset-bottom)适配刘海屏和虚拟导航键
安卓 WebView 的兼容性补救
部分安卓 Webview（尤其低版本或定制内核）不完全支持 fixed 定位，或在 input 聚焦时将页面整体上推，导致 fixed 元素“跟着动”。
立即学习“前端免费学习笔记（深入）”；
- 禁用输入框聚焦时的页面自动滚动：
input, textarea { scroll-margin-top: 0; }（现代安卓有效） - 为 input 添加
onfocus="window.scrollTo(0, 0)"强制重置滚动位置（简单粗暴但有效） - 关键 fixed 区域（如悬浮按钮）可降级为
position: absolute+ JS 监听scroll动态更新top/left（性能注意节流）
用现代方案替代：CSS @container + position: sticky
对于头部/侧边栏类场景，position: sticky 在多数移动端表现比 fixed 更可靠，且天然支持视口变化响应。
- 给容器设
overflow-y: auto，子元素设position: sticky; top: 0;，即可实现“局部固定” - 搭配
@container查询（需开启 container queries 支持），可按容器尺寸微调 sticky 行为 - 对全屏覆盖类需求（如 toast、modal），仍用 fixed，但包裹层加
transform: translateZ(0)强制硬件加速，减少重绘异常
