position: fixed 实现底部导航栏必须配 padding-bottom（非 margin-bottom）+ env(safe-area-inset-bottom)，否则必然遮内容、按钮失灵、键盘弹出错位；因其完全脱离文档流，浏览器不为其预留空间。
直接用 position: fixed 是最可行的方案，但不配 padding-bottom 或 margin-bottom + env(safe-area-inset-bottom)，必然遮内容、点不到按钮、软键盘弹出后错位。
为什么 fixed 导航栏总遮住主内容？
因为 position: fixed 让元素完全脱离文档流，浏览器渲染时根本“看不见”它——主内容从视口底部开始画，自然长进导航栏下面。这不是 bug，是 CSS 规范行为。
- 别指望自动留空，必须手动给主内容容器（比如
<main></main>）加margin-bottom，或给加padding-bottom -
margin-bottom更推荐：不影响scrollHeight，也不干扰IntersectionObserver等 API 的判断 - 值不能硬写
60px，得包含真实导航高度 + 安全区偏移，例如：calc(60px + env(safe-area-inset-bottom))
如何让 iPhone X+ 手势条不盖住导航按钮？
只写 bottom: 0 会让导航沉进系统手势条里，用户点不到。关键不是调位置，而是显式预留安全区空间。
- 必须在
中加：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env(safe-area-inset-bottom)返回0 - CSS 写法要兼容旧版 iOS：
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); - 不要在
calc()里混单位，Safari 15.4 之前不支持calc(10px + env(safe-area-inset-bottom))，必须拆成两条独立声明 - 安卓和旧 iOS 会忽略
env()，自动 fallback 为0，无副作用
导航项怎么等宽又不被压缩？
flex: 1 在按钮内或文字长度不一时容易失效，iOS Safari 对 flex: 1 在 <button></button> 里表现尤其不稳定。
- 导航容器设
display: flex，子项用flex: 0 0 20%（五格就写20%），比flex: 1更可控 - 加
min-width: 0防止文字撑开导致宽度不均 - 避免用
justify-content: space-around—— 它依赖父容器有明确宽度，而fixed容器默认没宽度约束，容易在某些 UA 下错位 - 图标用
<i></i>或<span></span>包裹，文字居中对齐，别靠text-align撑开热区
z-index 和层叠上下文容易踩哪些坑？
z-index 不是越高越好，设 9999 很可能压住系统级弹窗（如 iOS 分享面板、日期选择器）。
- 导航栏推荐
z-index: 100，弹窗类组件用z-index: 1000，中间留缓冲区间 - 检查外层是否用了
transform、filter或will-change—— 这些会隐式创建新层叠上下文，导致子元素z-index失效 - 真机调试时，在 Safari 开发者工具里看 computed 样式，确认
position仍是fixed，没退化成static - 微信 WebView 中建议 UA 判断兜底：
navigator.userAgent.includes('MicroMessenger')，必要时加body { position: relative; }防滚动错乱
真正难的不是让它“贴底”，而是让它在地址栏收放、软键盘弹起/收起、不同 WebView 实现之间保持稳定定位——这些场景下，env(safe-area-inset-bottom) 的 fallback 行为、fixed 的重排时机、以及层叠上下文的隐式创建，才是实际项目中最常翻车的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
