iOS Safari 中 position: fixed 错位是因键盘弹出或地址栏变化时视口更新不触发重排需用 viewport 控制、事件监听重绘及避免 100vh 等方案解决。为什么 position: fixed 在 iOS Safari 里会“跳”或“错位”不是你写错了是 iOS WebKit 对 position: fixed 的实现有历史遗留问题键盘弹出、地址栏收起/展开时视口尺寸变化不会触发重排导致固定元素位置卡在旧坐标上。安卓 Chrome 相对稳定但低端机仍有类似表现。实操建议立即学习“前端免费学习笔记深入”避免仅靠 bottom: 0 position: fixed 硬撑——加一层 viewport 元标签控制缩放和初始缩放meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno监听 resize 和 focusin/focusout 事件手动重设导航的 transform: translateY(0) 或触发布局重绘如修改 body 的 min-height慎用 height: 100vh 做容器高度iOS 中 vh 会按初始视口算键盘弹出后实际可视区域变小但 vh 不更新如何让底部导航不遮挡输入框且保持可点击常见错误是导航盖住 input typetext用户点不动、光标被挡住甚至触发页面意外滚动。实操建议立即学习“前端免费学习笔记深入”给所有可能唤起软键盘的元素input、textarea、contenteditable加 scrollIntoView({ behavior: smooth, block: nearest })确保聚焦时不被导航遮挡导航容器必须设 z-index推荐 z-index: 100但别盲目设太高如 9999否则可能压住系统级弹窗如 iOS 的分享面板用 pointer-events: auto 显式声明导航内按钮可交互——某些 CSS 重置库会全局设 pointer-events: none容易漏查position: fixed 底部导航与 Vue/React 组件生命周期的冲突在单页应用中导航常作为独立组件复用但路由切换时若父容器高度突变比如从长列表页切到空白页fixed 元素虽位置不变视觉上却像“粘在半空”。 NameGPT名称生成器 免费AI公司名称生成器AI在线生成企业名称注册公司名称起名大全。