用 position: fixed 做底部悬浮条最直接，但必须配 padding-bottom；新手易只写 position: fixed; bottom: 0; 导致内容被遮盖，因 fixed 元素脱离文档流、不占空间，需手动在 body 或主容器设 padding-bottom ≥ 悬浮条高度，响应式可用 calc()，禁用 margin-bottom，且避免依赖 vh 计算。
用 position: fixed 做底部悬浮条最直接，但必须配 padding-bottom
新手最容易犯的错是只写 position: fixed; bottom: 0;，结果内容被盖住——因为 fixed 元素完全脱离文档流，不占空间。浏览器根本不会“绕开”它去排版。
必须手动给内容区域留出空间：
-
body或主容器加padding-bottom: 60px;（值要 ≥ 悬浮条实际高度） - 如果悬浮条高度响应式（比如用
rem或媒体查询变化），改用padding-bottom: calc(1rem + 4px);更稳妥 - 别依赖
margin-bottom，它对fixed元素无效 - 移动端 Safari 地址栏收放时会触发
vh跳变，所以不要用height: 100vh去算 padding
想让悬浮条随内容滚动到底部？别用 fixed，改用 flex: 1
很多人混淆“固定在视口底部”和“沉底在内容末尾”。前者是导航栏、返回按钮；后者是页脚（footer），内容少时贴底、内容多时在正文后。
这时 position: fixed 是错的，应该用 Flexbox：
-
body设display: flex; flex-direction: column; min-height: 100vh; -
main（或内容容器）设flex: 1;，它会吃掉所有剩余高度 -
footer什么都不用设，自然被“挤”到底部 - IE11 对
flex: 1支持弱，可降级为在footer上加margin-top: auto;
position: absolute + bottom: 0 在局部容器里常失效
比如你想把一个按钮钉在卡片（.card）底部，写了 position: absolute; bottom: 0; 却没反应——大概率是父容器没设 position: relative;。
绝对定位会向上查找最近的「已定位祖先」，找不到就落到 html 根节点，位置完全失控：
- 必须确保父容器（如
.card）有position: relative; - 父容器还得有明确高度（比如
min-height: 200px;或height: 100%;），否则absolute元素可能塌到顶部 - 移动端断点切换时，
bottom值往往要重调，不如用display: flex; justify-content: space-between;更稳
position: sticky 的 bottom: 0 基本不可靠
别被 MDN 文档误导。目前所有主流浏览器对 sticky 的 bottom 支持都极差：Chrome 和 Safari 仅在特定 BFC 条件下偶现效果，iOS WebView 几乎无视它。
你写了 position: sticky; bottom: 0; 却没反应？不是代码错，是浏览器根本不支持：
- 它不会像
top: 0那样稳定吸附，多数情况表现为“不动”或“卡在中间” - 即使生效，也是相对于父容器底部，不是视口底部，和“悬浮”预期不符
- 想兼容微信、QQ 内置浏览器？直接放弃
sticky底部方案
真正需要“始终可见”的底部操作栏，fixed 是唯一可靠选择；而“内容不足时贴底、足够时随内容走”的页脚，flex: 1 才是语义正确且零维护成本的解法。两者混用，90% 的布局问题都源于此。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
