必须用position: fixed，因absolute受父级transform等干扰而错位，float不脱离文档流且在flex/grid中失效；right/bottom需响应式设置，垂直居中宜用margin-top替代transform，移动端必加touch-action: manipulation和user-select: none。
必须用 position: fixed，其他方式在滚动、缩放或弹窗出现时大概率失效。
为什么不能用 position: absolute 或 float
因为 position: absolute 会受父级 transform、perspective 或 filter 干扰——哪怕只是 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: 80px; }，避开 iOS 安全区 - 缩放鲁棒性（可选）：
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 或视频控件）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
