fixed底部导航遮盖按钮是因为其脱离文档流，内容区域无感知；须用box-sizing:border-box的padding-bottom作用于最外层容器，并配合viewport-fit=cover启用safe-area-inset-bottom动态适配，软键盘弹出时需js监听resize或focus事件动态调整。
fixed底部导航为什么总盖住按钮
因为 position: fixed 元素完全脱离文档流，浏览器不会为它预留空间。主内容区域“不知道”下面有个 60px 高的导航栏，滚动到底部时按钮自然就钻进去了——这不是 bug，是 fixed 的设计行为。
常见错误是给按钮容器加 margin-bottom: 60px，这在多数情况下无效：margin 会折叠、不触发重排、且对 fixed 元素无感知。必须用 padding-bottom，它是内容区域内部的“留白”，能真实撑开可用高度。
-
padding-bottom必须作用于最外层内容容器（如#app或main），别直接改body，避免影响全局样式 - 值要匹配导航栏实际高度（含内边距、border，不含 margin）
- 务必搭配
box-sizing: border-box，否则 padding 会让容器额外变高
iPhone安全区导致按钮被Home Indicator截断
只写 padding-bottom: 60px 在 iPhone X 及之后机型上依然会被 Home Indicator 截断，因为系统要求内容离物理底边至少 env(safe-area-inset-bottom) 的距离（通常是 34px）。这个值不能硬编码，必须动态获取。
关键前提是：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 必须存在。缺了 viewport-fit=cover，env(safe-area-inset-bottom) 永远返回 0px，所有后续适配都失效。
- 正确写法（双保险兼容 iOS 11.0+）：
padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom); - 如果还要加固定间距（比如导航栏本身高 60px，再加 8px 间隔）：
Safari 15.4+ 才支持calc(60px + env(safe-area-inset-bottom))；旧版必须拆成两行：padding-bottom: 60px;padding-bottom: calc(60px + env(safe-area-inset-bottom)); - 不要写
bottom: env(safe-area-inset-bottom)——env()不能直接用于定位属性，只对padding和margin有效
软键盘弹出后按钮又被顶上去怎么办
iOS Safari 和微信 WebView 在软键盘弹出后，env(safe-area-inset-bottom) 不会自动更新，但视口高度会缩，导致原本留白的 padding-bottom 过大，内容被顶到屏幕中间。
这不是 CSS 能解决的，得靠 JS 动态响应：
- 监听
resize事件（部分机型触发）或focus/blur事件（更可靠） - 检测
window.innerHeight变化，判断是否软键盘弹出 - 临时移除或重设
padding-bottom，恢复后需手动还原 - 注意：iOS 16.4+ 对
resize的触发更保守，不能依赖单一事件
按钮本身被遮挡而非内容区域被压
如果按钮视觉可见但点击无效，大概率不是安全区问题，而是层叠上下文（stacking context）或浮动布局导致的覆盖——比如上层元素（如注册按钮的 margin-top: 100px）渲染区域意外覆盖了按钮可点击区域。
- 验证方式：用开发者工具悬停按钮，看是否被其他元素高亮遮盖
- 优先清除浮动：在按钮父容器末尾加
<div style="clear: both"></div>，或改用display: flex布局 - 避免
float: right+position: relative组合，容易引发定位错乱和 z-index 不可控 - 检查是否有
z-index冲突，尤其当按钮嵌套在position: relative容器中时
viewport-fit=cover 这个前提——没它，后面全白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
