fixed底栏必然遮内容，因其完全脱离文档流，浏览器渲染主内容时“看不见”它；应给主内容容器（如main）设margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom))，并配viewport-fit=cover meta。
fixed 底栏为什么一定遮内容
因为 position: fixed 元素完全脱离文档流，浏览器渲染主内容时根本“看不见”它。你写的 .nav-bottom { position: fixed; bottom: 0; } 确实钉在了视口底部，但紧随其后的 <main></main> 会从页面最底端开始往上画——结果就是文字、按钮、表单全叠在导航栏下面。这不是 bug，是 CSS 规范的必然行为。
给谁加 margin-bottom？加多少？
必须加在主内容容器上（比如 <main></main> 或 .content），不能加在 body 上。
值要严格等于底栏真实高度 + 安全区偏移：
main { margin-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom)); }-
:root { --nav-height: 64px; }—— 这个变量得包含底栏的 padding、border、font-size 导致的实际视觉高度 - 必须配
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则env(safe-area-inset-bottom)在 iOS 上返回 0 - Android 旧版不支持
env()会 fallback 为 0，无副作用；iOS 返回约 34px（iPhone X 及之后）
z-index 失效？先查父容器有没有“造新层”
设 z-[9999] 没用，大概率是因为底栏外层或祖先节点触发了新的堆叠上下文。以下任一属性都会让子级 fixed 元素被“锁死”在其内部：
-
transform（哪怕只是translateZ(0)） -
opacity小于 1（如opacity: 0.99） -
filter（blur(1px)、drop-shadow()） -
will-change或isolation: auto
真机调试时，在 Safari 开发者工具里看 computed 样式，确认 position 还是 fixed，没退化成 static。
立即学习“前端免费学习笔记（深入）”；
iOS 键盘弹出后底栏上浮怎么办
这不是样式错，是 Safari 对 fixed 的重排支持不完整：键盘弹起时视口高度突变，但底栏坐标卡在旧位置。关键规避点：
- 底栏内部绝对不要放
<input>或<textarea></textarea>—— 这会强制重排视口，加剧错位 - 所有可聚焦元素加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })，确保聚焦时不被遮挡 - 别依赖 resize 监听动态改
margin-bottom—— iOS 触发时机不可靠，容易抖动 - 如果交互复杂（比如带搜索框的底栏），优先考虑用
position: sticky+ 父容器高度约束替代fixed
真正难处理的不是怎么写 fixed，而是怎么让它的定位空间、层级、响应行为三者不互相打架。尤其在混合软键盘、安全区、滚动监听的场景下，硬编码数值和盲目堆 z-index 只会让问题更隐蔽。
