用 position: fixed 做底部悬浮条必然遮挡内容，因它脱离文档流；解决方法是给 body 设置 padding-bottom（值≥悬浮条高度），而非依赖 margin 或 z-index。
用 position: fixed 做底部悬浮条（如操作栏、订阅按钮）时，遮挡内容是必然结果——它脱离文档流，浏览器不会为它预留空间。解决的关键不是“让它不遮”，而是“让内容主动避开它”。
为什么 position: fixed; bottom: 0 一定遮内容
固定定位元素完全脱离文档流，父容器高度塌陷，后续内容从视口顶部开始渲染，而悬浮条始终压在最底层 z 轴上。哪怕你加了 z-index，也只影响层叠顺序，不解决空间侵占问题。
- 常见错误：只写
footer { position: fixed; bottom: 0; }，没给body留出底部空隙 - 移动端尤其明显：iOS Safari 键盘弹出后，
fixed元素可能错位，但遮挡逻辑不变 - 不要试图用
margin-bottom加在最后一个内容块上——它不可靠，响应式下易失效
body 必须加 padding-bottom
这是最直接、兼容性最好、无需 JS 的解法。值必须 ≥ 悬浮条的渲染高度（非 100vh 或百分比）。
-
body { padding-bottom: 56px; }—— 高度建议用固定值（如56px），避免 Safari 地址栏收放导致跳变 - 若悬浮条高度动态（如字体缩放），可用 CSS 自定义属性 +
clamp()控制：padding-bottom: clamp(48px, 5.5vw, 64px); - 不要写成
min-height或height，那会撑高 body，破坏滚动行为
悬浮条自身样式三件套不能少
漏掉任意一项都可能导致错位或截断：
立即学习“前端免费学习笔记（深入）”；
-
position: fixed—— 必须，无替代 -
bottom: 0—— 锚定视口底部，不是父容器底部 -
left: 0; right: 0—— 确保水平铺满，防止滚动条出现时右侧留白 - 避免在内部放
<input>或<textarea>：iOS Safari 键盘弹出会触发 viewport 缩放，fixed元素常卡在错误位置
复杂场景下别硬扛，换 Flexbox 沉底
如果你其实要的是“页脚沉底”（内容少时贴底、内容多时随内容尾部自然落位），而不是“永远悬浮在视口底”，那 position: fixed 就是误用。此时应放弃固定定位，改用 Flexbox：
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }-
main { flex: 1; }—— 让主内容吃掉所有剩余空间 -
footer { width: 100%; }—— 不需要任何定位，也不遮内容 - 注意：HTML 结构必须是
<header>→<main>→<footer>顺序，否则flex: 1不生效
真正难处理的不是代码怎么写，而是先分清你要的是“沉底”还是“悬浮”——这两个需求的技术路径完全相反，混用只会反复踩坑。
