fixed导航栏遮挡内容是因为其脱离文档流不占空间，主内容“长”入其下方；正确解法是给主容器设margin-bottom（含safe-area-inset-bottom），配viewport-fit=cover，并避免body设padding-bottom。
为什么 fixed 导航栏总遮住内容？
因为 position: fixed 让元素完全脱离文档流，浏览器渲染主内容时根本“看不见”它，文字、按钮、表单自然就长进导航栏下面了。这不是 bug，是 CSS 规范行为——fixed 元素不占空间，也不参与布局计算。
- 别指望自动留空，必须手动预留底部空间
-
margin-bottom加在主内容容器（如<main></main>）上比padding-bottom加在更可控，避免影响scrollHeight和IntersectionObserver - 值必须匹配导航栏真实高度（含内边距、边框），不能只写
60px硬编码
如何正确预留底部安全空间？
用 margin-bottom + env(safe-area-inset-bottom) 是目前最稳妥的组合，前提是 viewport 配置正确。
- 在
中加：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env(safe-area-inset-bottom)不生效 - 定义 CSS 变量统一管理高度：
:root { --nav-height: 60px; }，再写main { margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); } - Android 旧版本忽略
env()会 fallback 为 0，无副作用；iOS 返回约 34px（iPhone X+ 手势条区域） - 绝对不要在
上设padding-bottom——会影响滚动判断和第三方库行为
z-index 和层叠上下文怎么不出错？
z-index 不是越高越好，设 9999 很可能压住系统级弹窗（如 iOS 分享面板、日期选择器），或被父容器隐式创建的层叠上下文截断。
- 推荐层级：导航栏用
z-index: 100，弹窗类组件用z-index: 1000，中间留出缓冲区间 - 检查导航栏外层是否用了
transform、filter或will-change——这些会隐式创建新层叠上下文，导致子元素z-index失效 - 真机调试时，在 Safari 开发者工具里看 computed 样式，确认
position仍是fixed，没退化成static
软键盘弹出时导航栏错位怎么办？
iOS Safari 对 position: fixed 的重排支持不完整：键盘弹起/收起时，视口尺寸变了，但 fixed 元素坐标卡在旧位置，导致“上浮”或“被顶起”。
- 绝对不要在导航栏内部放
<input>或<textarea></textarea>——这会强制重排视口，加剧错位 - 对所有可聚焦元素加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被导航遮挡 - 微信 WebView 中需 UA 判断兜底，部分版本对
env()支持不稳定
60px、漏掉 viewport-fit=cover、或把导航栏塞进 flex 容器里，都会让问题在真机上集中爆发。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
