真正能稳定锚定视口底部的只有position: fixed；必须同时设置bottom: 0、left: 0、right: 0，且body需加padding-bottom≥悬浮条高度以避让内容。
用 position: fixed 实现底部固定悬浮条
真正能稳定锚定在视口底部的，只有 position: fixed。它不依赖父容器、不随滚动偏移、兼容性好（IE9+），是唯一推荐方案。别用 position: absolute——它会相对于最近的已定位祖先，一滚动就飘走；也别指望 position: sticky，它在父容器高度不足或含 overflow: hidden 时直接失效。
基础写法必须包含三要素：position: fixed + bottom: 0 + left: 0 和 right: 0（缺一不可）。只设 bottom: 0 而不设左右边界，元素默认贴左上角，大概率遮住导航栏或内容首行。
- 高度建议用固定值，如
height: 56px，避免用100vh或百分比——Safari 地址栏收放时会跳变 - 必须加
z-index: 999（别堆到 99999），否则可能被模态框、广告位或第三方 SDK 盖住 - 若内部含
<input>或<textarea></textarea>，iOS Safari 键盘弹出后易错位，这类交互尽量外置
主内容如何避让，不被遮挡
fixed 元素天然脱离文档流，所以主内容会“上移”去填它原来的位置——这不是 JS 能动态修好的问题，得靠 CSS 预留空间。最稳做法是给 加 padding-bottom，值至少等于悬浮条高度。
- 例如悬浮条高
56px，则写body { padding-bottom: 56px; } - 别给
<main></main>或其他容器加 margin/padding——它们可能被嵌套滚动区域干扰，导致计算失效 - 如果页面本身高度不足一屏（比如只有几行文字），
body还需加min-height: 100vh，否则 iOS Safari 下 fixed 锚点会“粘滞”消失 - 避免用
margin-bottom替代padding-bottom：margin 不参与盒模型高度计算，无法保证底部留空
移动端和 iOS Safari 的典型坑
iOS Safari 对 fixed 的支持有历史包袱，不是加了样式就万事大吉。很多线上 bug 都卡在这几处：
- 父容器设了
overflow: hidden或-webkit-overflow-scrolling: touch，会导致子级 fixed 元素脱离视口锚定 - 页面有输入框且获得焦点时，fixed 行为可能临时降级为 absolute，悬浮条跳到错误位置
- 没加
transform: translateZ(0)或will-change: transform，滚动中可能出现卡顿或重绘撕裂 - 用
user-scalable=no的<meta viewport>“修复”闪动——这破坏可访问性，且不符合 WCAG 1.4.4
要不要加动画或交互？先想清楚再加
基础悬浮条不需要 JS 就能跑通。但一旦加了“滚动出现/隐藏”“点击展开”“状态切换”，复杂度立刻上升。这些不是锦上添花，而是容易埋雷的点：
- 监听
scroll事件不做节流，快速滚动时会触发数百次重排，卡顿明显 - 用
display: none隐藏后再display: block显示，会丢失绑定的事件监听器，得重新 bind - 用户连点多次，可能生成多个实例；拖拽移动后没清理
mousemove监听器，造成内存泄漏 - 关闭时用
remove()而非display: none，下次 show 又得重建 DOM 和事件绑定
真正难的从来不是“怎么让它固定”，而是“怎么让它在各种边界场景下不崩”。先确保基础定位和避让稳了，再考虑动效和交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
