position: fixed 是移动端底部悬浮条唯一可靠方案，需配合 left: 0; right: 0; bottom: 0; z-index: 100; 并为内容容器设置 padding-bottom 避免遮挡，同时注意热区、系统栏避让及全屏高度适配。
用 position: fixed 是唯一可靠方案
移动端底部悬浮条（比如 tabbar、快捷操作、客服入口）必须脱离文档流，position: fixed 是目前所有主流浏览器（含 iOS Safari 17+、Android Chrome）中唯一能稳定锚定视口底部的方式。position: sticky 在底部场景下基本不可用——它依赖父容器高度和滚动方向，无法真正“固定在底”；absolute 更不行，一旦父容器有 transform 或 overflow-scroll，按钮就会偏移甚至消失。
bottom: 0 会遮内容？加 padding-bottom 就行
直接设 bottom: 0 后，主内容最后一段文字常被遮住。这不是 bug，是 fixed 元素天然不占空间导致的布局缺失。解决方法只有一条：给 body 或最外层内容容器加 padding-bottom，值等于悬浮条高度。
- 若悬浮条高度固定（如 56px），写
body { padding-bottom: 56px; } - 若高度响应式（如用
clamp(48px, 6vh, 64px)），建议 JS 动态读取并设置style.paddingBottom，避免 CSS 无法计算 - 别用
margin-bottom替代——它可能被父容器overflow: hidden截断
移动端必须处理的三个细节
iOS Safari 和部分 Android WebView 对 fixed 的实现有隐性限制，不处理就会出现“滚动卡顿”“点击失焦”“热区失效”等问题。
-
bottom: 24px比bottom: 0更安全：避开系统任务栏、浏览器地址栏重绘干扰，也防止误触底部导航栏 - 触摸热区至少
44px × 44px：哪怕图标只有 24px，也要给容器设width: 56px; height: 56px;，再用display: flex; align-items: center; justify-content: center;居中图标 -
min-height: 100vh必须加在body上：否则页面内容不足一屏时，iOS Safari 可能无法稳定锚定fixed元素，导致悬浮条“闪一下就消失”
别用 z-index: 999999，也别漏掉 left: 0; right: 0
只写 position: fixed; bottom: 0; 是不够的。缺了 left: 0; right: 0，元素宽度会退化为内容宽，在 flex 或 grid 容器里可能错位；而 z-index 设太高（比如 999999）反而容易压住第三方 SDK 弹窗、调试工具栏或系统级 UI（如 iOS 的“返回上一页”手势提示条）。
- 推荐组合：
position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; - 如果悬浮条需要左右留白（如避开圆角屏幕），改用
right: 20px; left: 20px;，而非靠内部margin - 若同时存在顶部吸顶导航栏，注意两者
z-index层级不要冲突（例如导航栏用 101，底部条用 100）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
