position: fixed 最可靠但需配 padding-bottom 和安全区处理，否则遮内容、被 ios 手势条盖、在微信中闪动；必须用 padding-bottom（非 margin-bottom）并配合 viewport-fit=cover 和 env(safe-area-inset-bottom)。
直接用 position: fixed 是最可靠的方式，但不配 padding-bottom 和安全区处理，必然遮内容、被 iOS 手势条盖住、在微信里闪动或上浮。
为什么 position: fixed 会遮挡页面内容
因为 fixed 元素完全脱离文档流，不占空间。主内容从视口底部开始渲染，直接“长”进导航栏下面。
- 必须给
body或主容器加padding-bottom（不是margin-bottom），值 = 导航栏高度 +env(safe-area-inset-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()就不生效 - Android 旧版浏览器忽略
env()会 fallback 为 0，无副作用，不用额外兼容
z-index 设太高反而坏事
不是层级不够高，而是父容器隐式创建了新层叠上下文，导致弹窗、Picker 全被压住。
-
z-index只对position不为static的元素生效 - 导航栏外层如果用了
transform、filter或will-change，就会隐式创建层叠上下文 - 真机调试时，用 Safari 开发者工具检查 computed 样式里的
position是否仍是fixed，还是已退化为static - 稳妥做法：
.bottom-nav { z-index: 100 }，弹窗设z-index: 1000，中间别留大空档
微信 WebView 和 iOS Safari 的真实雷区
软键盘弹出/收起时，fixed 定位容易错位、闪烁、上浮——这不是 bug，是渲染机制差异。
- 绝对不要在导航栏内部放
<input>或<textarea></textarea>，iOS Safari 会强制重排视口 - 别依赖
window.innerHeight动态算高度，键盘弹出后它返回的是压缩后的值，不可靠 - 微信中可用 UA 判断：
navigator.userAgent.includes('MicroMessenger')，必要时加body { position: relative }防滚动错乱 - Vue/React 中，别用
v-if或display: none控制导航显隐，改用v-show或visibility: hidden，防止反复脱离/重入文档流引发抖动
真正难的不是让导航栏“固定”，而是让它在地址栏收放、软键盘弹出、手势条切换这些动态场景下依然稳如磐石——所有细节都得实测，光看文档没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
