必须用 position: fixed，因 absolute 受父级 transform 等干扰而脱离视口定位，float 不脱离文档流且在 flex/grid 中失效；right/bottom 需分层设值兼顾安全区与缩放；垂直居中推荐 margin-top 或 flex 容器；移动端必加 touch-action: manipulation 和 user-select: none。
必须用 position: fixed，其他方式在滚动、Modal 弹出或 iOS Safari 中大概率失效。
为什么不能用 position: absolute 或 float
因为 position: absolute 会受父级 transform、perspective 或 will-change 干扰——哪怕只是 transform: translateZ(0)，它就不再相对于视口，而是相对于那个父容器。常见现象是：Modal 弹出后按钮上移、iOS Safari 中消失、Chrome 新标签页里跑到左上角。float 根本不脱离文档流，在 flex 或 grid 容器中直接失效，也无法固定在视口右下角。
right 和 bottom 的安全值怎么设
写死 right: 20px; bottom: 20px 在小屏或高缩放比下容易压住浏览器滚动条、iOS 底部手势栏或 Windows 任务栏。推荐分层处理：
- 桌面端基础值：
right: 24px; bottom: 24px - 移动端适配：
@media (max-width: 768px) { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } - 缩放鲁棒性（可选）：
right: calc(1.5vw + 12px);，兼顾小屏收缩和大屏留白 - 禁用用户缩放干扰（仅 WebApp 场景）：
<meta name="viewport" content="user-scalable=no">
垂直居中别用 transform: translateY(-50%)
很多示例用 top: 50%; transform: translateY(-50%) 垂直居中，但有两个硬伤：
立即学习“前端免费学习笔记（深入）”；
- 如果按钮高度动态变化（比如图标加载延迟、文字变长），
transform不会触发布局重排，视觉就偏了 - 旧版 Safari（iOS 12–13）中，
transform可能导致z-index分层异常，被其他fixed元素盖住
更稳的写法：top: 50%; margin-top: -65px;（假设按钮高 130px），或把按钮包进 display: flex; justify-content: center; 的容器里。
移动端必须加的两个 CSS 属性
否则在 iOS 上点不动、滑动卡顿：
-
touch-action: manipulation;—— 告诉浏览器这个区域只做点击/轻触 -
user-select: none;—— 防止长按误触发文字选择 - 顺带加上
cursor: pointer;，提升交互反馈
真正难的不是写出来，而是让悬浮按钮在 Modal 弹出、页面缩放、iOS 滚动、第三方 SDK 注入后依然稳在原位——关键在于结构要扁平（直接挂 下）、祖先别加 transform、z-index 别设太高（9999 足够，999999 可能压住 devtools 或视频控件）。
