用 position: fixed 实现底部导航栏需手动预留安全间距，因 fixed 元素脱离文档流会遮挡内容；应通过 padding-bottom + env(safe-area-inset-bottom) 动态适配，并避免 z-index 过高、父容器创建隐式层叠上下文等问题。
直接用 position: fixed 能让导航栏“钉”在视口底部，但不配避让逻辑，它一定会遮住页面最后一段内容——这不是 bug，是 CSS 的必然行为。
为什么 fixed 底部导航总盖住内容？
因为 position: fixed 元素完全脱离文档流，浏览器渲染主内容时根本“看不见”它。文字、按钮、表单会自然长进导航栏下方，尤其在 iOS Safari 或微信 WebView 中更明显。
- 别指望自动留空，必须手动给主内容区域预留空间
-
margin-bottom容易在 flex/grid 布局中被折叠或失效，优先用padding-bottom - 值必须匹配导航栏真实高度（含
padding、border），不能只写死60px - 若导航栏用了
box-sizing: content-box（默认），设height: 60px+padding: 12px后实际高为 84px，会进一步加剧遮挡
如何正确预留底部安全间距？
关键不是加个固定值，而是适配不同设备的动态视口和安全区。
- 在
中加：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env(safe-area-inset-bottom)不生效 - 定义统一变量：
:root { --nav-height: 60px; }，再写main { padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); } - Android 旧版本忽略
env()会 fallback 为 0，无副作用；iOS 返回约 34px（iPhone X+ 手势条区域） - 绝对不要在
body上设padding-bottom——会影响scrollHeight和IntersectionObserver判断
fixed 导航栏为何在 iOS 键盘弹起后错位？
iOS Safari 对 position: fixed 的重排支持不完整：软键盘弹出/收起时，视口尺寸变了，但 fixed 元素坐标卡在旧位置，导致“上浮”或“被顶起”。
- 绝对不要在导航栏内部放
<input>或<textarea></textarea>——这会强制重排视口，加剧错位 - 对所有可聚焦元素加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被遮挡 - 微信 WebView 中需 UA 判断兜底，部分版本对
env()支持不稳定 - 避免用
transform或filter包裹导航父容器——会隐式创建层叠上下文，导致z-index失效
z-index 和层叠上下文怎么不出错？
z-index 不是越高越好，设 9999 很可能压住系统级弹窗（如 iOS 分享面板、日期选择器），或被父容器隐式创建的层叠上下文截断。
- 推荐设
z-index: 100～200，够用且安全 - 检查是否有父容器用了
transform、filter或will-change——这些会隐式创建新层叠上下文 - 真机调试时，在 Safari 开发者工具里看 computed 样式，确认
position仍是fixed，没退化成static - 导航栏宽度用
left: 0; right: 0比width: 100%更稳，避免受body的margin干扰
实际高度计算和安全区适配是容易被跳过的环节，尤其在快速迭代中——写死 60px、漏掉 viewport-fit=cover、忽略软键盘场景，都会在真机上暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
