position: fixed 是唯一可靠方案，必须设 bottom: 0（小屏用80px避系统栏）、left: 0、right: 0 和 z-index: 1000，禁用百分比/0值贴边，防遮挡需约束自身而非 body，动画用 opacity+visibility+transform 避免闪动。
用 position: fixed 是唯一可靠方案
靠 margin-top: auto、bottom: 0 配合 absolute，或者试图用 sticky 实现底部悬浮，都会在滚动、缩放、父级加 transform 时失效。只有 position: fixed 能真正锚定视口，不随页面滚动偏移。
关键不是“设了 fixed 就完事”，而是必须显式声明位置原点：
-
bottom: 0是核心，不是top: auto或留空 -
left: 0和right: 0一起用，确保宽度铺满（否则只占内容宽） - 必须设
z-index（如z-index: 1000），否则可能被其他fixed或absolute元素盖住
bottom: 0 贴边会出问题，该设多少？
设 bottom: 0 看似最“到底”，但实际在 iOS Safari、部分安卓浏览器里，会和系统任务栏/浏览器滚动条重叠，导致按钮不可见或点击失灵。
推荐统一用像素值，兼顾安全与一致性：
立即学习“前端免费学习笔记（深入）”；
- PC 和大屏：用
bottom: 24px，右侧同理right: 24px - 移动端小屏（
@media (max-width: 768px)）：加大到bottom: 80px，避开底部导航栏热区 - 绝对不要用
%、vh或0——视口单位在 iOS 上解析不稳定，贴边则失去可触达性
为什么内容会被遮住？怎么防
因为 fixed 元素脱离文档流，它不会自动给 body 留出空间。常见错误是手动给 body 加 padding-bottom，结果在缩放或窄屏下触发横向滚动条。
正确做法只约束悬浮条自身，不干扰布局流：
- 不设
margin、padding影响主文档流 - 给
body加min-height: 100vh，防止 iOS Safari 中因页面高度不足导致按钮“粘滞消失” - 如果悬浮条高度固定（比如
56px），且你确定它必须压住部分内容（如操作栏），才考虑加padding-bottom: 56px到主内容容器，而不是body
滑入动画怎么做才不闪
用 display: none + display: block 切换会触发重排，造成明显闪动；用 opacity: 0 + visibility: hidden 配合 transform: translateY(20px) 才能平滑过渡。
关键点：
- 初始状态必须是
visibility: hidden; opacity: 0; transform: translateY(20px) - 动画用
@keyframes控制，别依赖 JS 改 class 后再读 offsetHeight 触发——有竞态风险 - 动画完成后再移除
visibility: hidden（或改用visibility: visible），避免过渡期间元素仍不可聚焦或被屏幕阅读器忽略
真正难的不是写出来，是首次加载后 DOM 已就绪、但字体或图片还没加载完时，悬浮条高度可能临时变化，导致滑入终点错位——得监听 fontload 或用 resize + requestAnimationFrame 做二次校准。
