position: fixed 是唯一可靠方案，必须搭配 bottom: 0、left: 0; right: 0，并为 body 设置 ≥ 悬浮条高度的 padding-bottom；若需页脚沉底而非视口固定，则应改用 flexbox 布局。
用 position: fixed 是唯一可靠方式
想让悬浮条“滑动到底部还固定住”，本质就是它必须始终锚定在视口底部，和页面滚动无关——position: fixed 是唯一符合语义且跨浏览器稳定的方案。position: absolute 会随父容器偏移或受 transform 干扰，sticky 在底部不生效（只支持 top 方向），flex 沉底则根本不是“固定”，而是随内容自然落位。
必须写全三件套：position: fixed、bottom: 0、left: 0; right: 0。漏掉 left 和 right，宽度可能只占内容宽，滚动条出现时右侧留白；只写 bottom: 0 不加 left/right，在 Safari 或缩放后容易错位。
body 必须加 padding-bottom，否则内容一定被遮
position: fixed 元素完全脱离文档流，浏览器不会为它预留空间。你看到内容被盖住，不是样式写错了，是 body 没主动“让出位置”。这不是 bug，是 fixed 的必然行为。
-
padding-bottom值必须 ≥ 悬浮条的渲染高度（比如56px），不能用100vh或百分比，Safari 地址栏收放会导致跳变 - 不要给最后一个内容块加
margin-bottom——响应式下失效，且无法应对字体缩放 - 若高度动态（如随
vw变化），可用padding-bottom: clamp(48px, 5.5vw, 64px)，但别用min-height或height，那会撑高 body 破坏滚动
移动端键盘弹出时错位？避开 <input> 和 <textarea></textarea>
iOS Safari 键盘弹出会强制 viewport 缩放，导致 position: fixed 元素卡在错误位置。这不是 CSS 能修的，是 WebKit 已知限制。
- 绝对不要在悬浮条内部放
<input>或<textarea></textarea>，哪怕只是 placeholder - 如果必须交互，把输入框抽离到独立弹层（modal），悬浮条只保留触发按钮
- 给
body加min-height: 100vh可缓解部分“消失”问题，但不能根治键盘错位
真要“沉底”而不是“悬浮”？立刻换 flex 布局
如果你发现用户滚动到底部才看到悬浮条、或者希望它“内容少时贴底、内容多时随内容尾部自然落下”，那你真正要的是页脚沉底，不是视口固定——这是两个完全相反的需求，混用必踩坑。
正确做法：body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }，main { flex: 1; }，footer { width: 100%; }。HTML 结构必须是 <header>→<main>→<footer></footer></main></header> 顺序，否则 flex: 1 不生效。
最常被忽略的一点：没分清“沉底”和“悬浮”的业务意图，就直接抄代码。前者是布局逻辑，后者是 UI 层级控制，从设计阶段就得定死，后期硬改只会反复重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
