正确解法是给主内容容器设margin-bottom（值为导航栏高度加env(safe-area-inset-bottom)），配viewport-fit=cover，避免body设padding-bottom或硬编码高度。
直接用 position: fixed 能让导航栏钉在底部，但不处理安全区和内容避让，必然遮内容——这不是 bug，是 CSS 行为规范本身决定的。
为什么 fixed 导航栏会遮住页面内容
position: fixed 元素完全脱离文档流，不占空间。浏览器渲染主内容时，根本不知道底下还有个导航栏，于是文字、按钮、表单全“长”进导航栏下面。尤其在 iOS Safari 或微信 WebView 中，滚动 + 软键盘弹出后，错位更明显。
- 别指望浏览器自动留空——它不会
-
margin-bottom加在主体上比padding-bottom加在body更可控，避免scrollHeight和IntersectionObserver判断失准 - 值必须匹配导航栏真实高度（含内边距、边框），不能只写
60px硬编码
如何正确预留底部空间（不遮挡内容）
给主内容容器（比如 <main> 或 .content）加 margin-bottom，值为导航栏高度 + 安全区偏移。
- 用 CSS 变量统一管理：
::root { --nav-height: 60px; }，再写main { margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); } - 必须配
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env(safe-area-inset-bottom)不生效 - Android 旧版本忽略
env()会 fallback 为0，无副作用；iOS 则返回约34px - 避免在
body上设padding-bottom——会影响scrollHeight和IntersectionObserver判断
fixed 导航栏的 z-index 和层叠陷阱
z-index 不是越高越好。设 z-index: 9999 很可能压住系统级弹窗（如 iOS 分享面板、日期选择器），或被父容器隐式创建的层叠上下文截断。
立即学习“前端免费学习笔记（深入）”；
- 建议留出缓冲区间，例如用
z-index: 100～200 - 检查导航栏外层是否用了
transform、filter或will-change——这些会隐式创建新层叠上下文，导致子元素z-index失效 - 真机调试时，在 Safari 开发者工具里看 computed 样式，确认
position仍是fixed，没退化成static
软键盘弹出时导航栏错位怎么办
iOS Safari 对 position: fixed 的重排支持不完整：键盘弹起/收起时，视口尺寸变了，但 fixed 元素坐标卡在旧位置，导致“上浮”或“被顶起”。
- 绝对不要在导航栏内部放
<input>或<textarea>——这会强制重排视口，加剧错位 - 对所有可聚焦元素加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被导航遮挡 - 微信 WebView 可 UA 判断：
navigator.userAgent.includes('MicroMessenger')
最易被忽略的是：安全区偏移不是“可选适配”，而是 iPhone X+ 设备上的硬性布局约束；env(safe-area-inset-bottom) 必须配合 viewport-fit=cover 才生效，缺一不可。
