最稳解法是给主内容容器设margin-bottom（含safe-area-inset-bottom），配viewport-fit=cover；因fixed脱离文档流，主内容需主动退让，margin-bottom比padding-bottom更可控、不干扰滚动和脚本。
用 position: fixed 加 margin-bottom 预留空间，再配合 env(safe-area-inset-bottom) 处理 iPhone 安全区，是目前最稳定、兼容性最好的做法。单纯靠 fixed 或单纯靠 flex 都会掉坑里。
为什么 fixed 底部栏总遮住内容？
因为 position: fixed 元素完全脱离文档流，浏览器渲染主内容时根本“看不见”它——文字、按钮、表单自然就长进导航栏下面了。这不是 bug，是 CSS 规范行为。
- 不能指望自动留空，必须手动给主体容器（如
main）加margin-bottom - 值必须严格等于底部栏真实高度（含内边距、边框），不能只写
60px硬编码 - 别在
body上设padding-bottom：会影响scrollHeight和IntersectionObserver判断
如何正确预留安全区 + 导航栏高度？
用 margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)) 是目前最稳妥的组合，但前提是 viewport 配置正确。
- 在
<head>中加：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env(safe-area-inset-bottom)返回0 - 定义 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+ 手势条区域）
z-index 和层叠上下文怎么不出错？
z-index 不是越高越好，设 9999 很可能压住系统级弹窗（如 iOS 分享面板、日期选择器），或被父容器隐式创建的层叠上下文截断。
立即学习“前端免费学习笔记（深入）”；
- 推荐层级：
.bottom-nav { z-index: 100; }，弹窗类组件用z-index: 1000，中间留出缓冲区间 - 检查导航栏外层是否用了
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 判断兜底，部分版本对
env()支持不稳定
真正难的不是写几行 CSS，而是理解 env(safe-area-inset-bottom) 只在 viewport-fit=cover 下生效、margin-bottom 必须作用于内容容器而非 body、以及 z-index 在 iOS 系统弹窗面前有多脆弱——这些点漏一个，真机上就出问题。
