position: fixed遮挡内容是因为其脱离文档流，需为body或主容器设padding-bottom（值=导航栏高+safe-area-inset-bottom），配合理想z-index和避免transform等隐式层叠上下文。
直接用 position: fixed 是最稳妥的方案，但必须配 padding-bottom、z-index 和安全区处理，否则在 iOS 和微信 WebView 中必然遮挡内容或被手势条盖住。
为什么 position: fixed 会遮住页面内容
因为 fixed 元素完全脱离文档流，不占空间。浏览器不会自动为它预留位置，主内容会从视口底部开始渲染，直接“长”进导航栏下面。
- 必须给
body或主容器加padding-bottom（不是margin-bottom），值要匹配导航栏高度 - 推荐用 CSS 自定义属性统一管理：
--nav-height: 60px，再写padding-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，无副作用
z-index 设太高反而引发层叠冲突
常见错误是无脑设 z-index: 9999，结果弹窗、Picker、日期选择器全被压在下面——不是层级不够高，而是父容器创建了新的层叠上下文。
-
z-index只对position不为static的元素生效 - 如果导航栏外层包裹了
transform、filter或will-change，就会隐式创建层叠上下文，导致子元素的z-index只在该上下文内比较 - 真机调试时，用 Safari 开发者工具检查 computed 样式里的
position是否仍是fixed，还是已退化为static - 稳妥做法：导航栏自身设
z-index: 100，弹窗设z-index: 1000，中间不要留大空档
微信 WebView 和 iOS Safari 的兼容性雷区
微信内置浏览器和 iOS Safari 对 fixed 的实现有细微差异，尤其在软键盘弹出/收起时，容易出现导航栏上浮、错位或闪烁。
- 避免在导航栏内部放
<input>或<textarea></textarea>—— iOS Safari 会强制重排视口，导致 fixed 定位偏移 - 不要依赖
window.innerHeight动态算高度，它在键盘弹出后返回的是压缩后的值，不可靠 - 微信中可 UA 判断：
navigator.userAgent.includes('MicroMessenger')，必要时加body { position: relative; }防止滚动错乱 - 如果用 Vue/React，别在导航组件里用
v-if或display: none控制显隐，改用v-show或visibility: hidden，防止反复脱离/重入文档流引发抖动
真正难的不是让导航栏“固定”，而是让它在地址栏收放、软键盘弹起、横竖屏切换、安全区变化这些动态场景下始终稳定——这些细节不写死在 CSS 里，光靠 JS 补救永远慢半拍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
