固定吸底按钮遮挡内容的根本原因是fixed元素脱离文档流，需为内容容器设置padding-bottom预留空间，推荐使用calc(60px + env(safe-area-inset-bottom, 0px))并配合viewport-fit=cover和box-sizing: border-box。
固定吸底按钮遮挡内容，根本不是样式写错了，而是没给内容区域“留出它该占的位置”。position: fixed 的按钮完全脱离文档流，浏览器默认不会为它腾空间——你得手动告诉内容：“你最多只能长到这里”。
为什么 position: fixed 按钮一定遮内容？
这不是 bug，是 CSS 规范行为：fixed 元素不参与布局计算，主内容渲染时根本“看不见”它。结果就是文字、列表最后一项、输入框直接从视口底部往上画，自然钻进按钮底下。
- 常见现象：滚动到底部时，最后一个
<li>或提交按钮被盖住，点不到 - 错误解法：在按钮上加
margin-bottom或padding-bottom—— 它已脱离文档流，这些属性无效 - 真正要动的是内容容器，不是按钮本身
最稳方案：用 padding-bottom + env(safe-area-inset-bottom) 预留空间
给最外层内容容器（比如 #app、main 或 .page-content）加内边距，值 = 按钮真实高度 + 安全区偏移。这是兼容性最好、逻辑最清晰的做法。
- 必须声明
box-sizing: border-box，否则padding-bottom会让容器总高度超出预期 -
viewport-fit=cover是硬性前提，缺了这句，env(safe-area-inset-bottom)永远返回0px - 双写降级更安全：
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); - 如果按钮高 60px，就写：
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
键盘弹出时按钮错位？优先换 position: sticky
position: fixed 在 iOS 键盘弹起后坐标卡死，bottom 值不会随视口压缩更新。而 sticky 天然响应滚动和视口变化，且无需 JS 就能避让键盘（iOS 15.4+、Chrome 90+ 支持）。
- 父容器（如
main）必须设min-height: 100vh，不能只写height: 100% - 父容器不能有
transform、overflow: hidden或position: fixed父级，否则sticky失效且无报错 - 按钮自身写：
position: sticky; bottom: 0;，别加width: 100%，横屏时可能偏移 - 安卓 WebView 和旧 iOS 可兜底用
padding-bottom，不影响sticky行为
真正难的从来不是写出那两行 env()，而是意识到：移动端吸底不是单一样式问题，而是结构（容器高度）、环境（viewport-fit）、动态（键盘/横竖屏）三者必须对齐。漏掉任意一环，按钮就在某个真机场景里消失或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
