根本原因是position: fixed使元素完全脱离文档流，浏览器渲染时“看不见”它，导致主内容上浮被遮挡；必须在主内容容器（如<main>）加padding-bottom，值为导航栏实际高度加env(safe-area-inset-bottom)，并确保viewport-fit=cover。
fixed 元素遮挡内容的根本原因是什么
不是样式写错了，是 position: fixed 本身的机制决定的：它让元素完全脱离文档流，浏览器渲染其他内容时压根“看不见”它。所以主内容会自然上浮、填满原本导航栏占据的空间，结果就是文字/按钮/表单直接长进导航栏底下——尤其在 iOS Safari 或微信 WebView 中特别明显。
给谁加 padding-bottom？加多少？
必须加在**主内容容器**上（比如 <main>、<div class="content"> 或包裹全部业务内容的 #app），不能加在 body 上——否则会影响 scrollHeight、IntersectionObserver 触底判断，甚至破坏第三方组件的滚动逻辑。
- 值要等于 fixed 元素的**实际高度**，不是 CSS 里写的
height: 60px，而是含padding和border后的总高（例如height: 60px+padding: 12px 0→ 实际高 84px） - 如果用了
box-sizing: content-box（默认），记得手动算进去；推荐统一设box-sizing: border-box - 响应式场景下别写死
60px，用 CSS 变量 +calc()：padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
env(safe-area-inset-bottom) 怎么用才不白写
env(safe-area-inset-bottom) 在 iPhone X 及之后机型返回约 34px（手势条区域），但前提是 <head> 里有这句：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">。缺了它，iOS 就当没这回事。
- Android 旧版本会忽略
env()，直接 fallback 为 0，无副作用，可以放心用 - 微信 WebView 部分版本对
env()支持不稳定，建议 UA 判断后加 JS 兜底（比如检测到微信且env()返回 0，就手动补 34px） - 绝对不要在导航栏父容器上加
transform或filter——会隐式创建层叠上下文，导致z-index失效，导航栏可能被其他 absolute 元素盖住
键盘弹起时 fixed 导航栏错位怎么防
iOS Safari 对 position: fixed 的重排支持不完整：软键盘弹出/收起时视口尺寸变了，但 fixed 元素坐标卡在旧位置，造成“上浮”或“被顶起”。这不是 bug，是已知限制。
立即学习“前端免费学习笔记（深入）”；
- 导航栏内部**绝对不要放
<input>或<textarea>**——这是触发错位的高频操作 - 所有可聚焦元素（如输入框、下拉、按钮）加上
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被遮挡 - 不要依赖
resize或orientationchange事件去动态改 height——iOS 键盘弹起时这些事件不一定触发，或触发时机不可靠
