移动端底部导航错位主因是sticky未激活或fixed坐标系被破坏：sticky需明确高度+可滚动父容器且ios 15.4前不支持bottom；fixed则受viewport缩放、祖先transform、滚动条宽度等影响，须用100vw+完整meta配置兜底。
移动端底部导航定位错位，90% 不是 bottom: 0 写错了，而是 position: sticky 根本没激活，或 position: fixed 被 viewport、祖先 transform、滚动条宽度等隐性因素破坏了坐标系。
sticky bottom 在 iOS 上不生效的硬性条件
直接给导航栏加 position: sticky; bottom: 0 无效，是因为：
-
sticky只对top或bottom单方向生效，且必须依赖一个「有明确高度 + 可滚动」的父容器 —— 而body默认不满足 - iOS Safari 15.4 之前完全忽略
bottom: 0，真机上表现为导航栏卡在顶部或消失 - 只要导航栏任意祖先元素有
transform、filter、will-change或overflow: hidden，sticky 就会退化为static
验证方式：真机 Safari 开发者工具 → Elements → 查看 computed position 是否仍是 sticky；如果不是，说明被中断了。
fixed 底部导航被滚动条/缩放拉偏的根源
position: fixed; bottom: 0 看似简单，但在移动端极易错位，常见诱因：
-
viewport缺initial-scale=1.0或maximum-scale=1.0，iOS 会动态缩放页面，但 fixed 元素坐标不重绘，导致点击区域和视觉位置脱节 - 用
width: 100%而不是left: 0; right: 0——100%按 body 宽度计算，而 body 宽度随滚动条出现/消失跳变；100vw更稳，但 iOS Safari 中它包含地址栏高度波动 - 祖先元素含
transform: translateZ(0)或-webkit-overflow-scrolling: touch（已废弃），会把 fixed 锚点从视口降级为该祖先容器
临时修复：给 html 和 body 加 overflow-y: scroll 强制滚动条常驻，消除宽度抖动。
真正兼容旧版 iOS 的落地写法
不要只押注 sticky 或 fixed —— 需组合策略，覆盖 iOS 14+ 和 Android 8+：
- 结构上：底部导航必须是
body的直接子元素，不能嵌套在div#app或main里 - CSS 上：
position: fixed; bottom: 0; left: 0; right: 0; width: 100vw;（不用100%） - viewport 必须完整：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 降级兜底：检测 iOS scroll 和
resize，手动更新bottom值（基于window.innerHeight - nav.offsetHeight）
注意：z-index 至少设为 1000，否则可能被某些框架的 modal 或 toast 遮住。
为什么 flex 布局比定位更可靠
如果业务允许放弃“永远贴底”，用 display: flex; flex-direction: column; height: 100vh 包裹内容区 + 导航栏，是最少坑的方案：
- 导航栏放在 flex 容器末尾：
margin-top: auto或align-self: flex-end - 不脱离文档流，缩放、软键盘弹出、双指缩放时坐标不会脱节
- 无需处理
100vw在 Safari 中的地址栏高度误差，也不依赖 sticky/fixed 的浏览器实现细节 - 缺点：导航栏不随内容滚动“吸底”，而是固定在视口底部 —— 这反而是多数产品想要的行为
复杂点不在 CSS 写法本身，而在你是否清楚当前项目要支持的最低 iOS 版本、是否允许 JS 介入、以及设计稿中“底部导航”究竟是“视觉贴底”还是“交互锚定”。这三个判断漏掉任何一个，都容易反复踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
