悬浮按钮（FAB）应优先用 position: absolute 配合定位上下文和 viewport 单位实现稳定悬停，避免 fixed 定位引发的偏移、卡顿与失效；流光动画宜用 filter + 伪元素替代多层 box-shadow；点击热区须 ≥48px×48px，兼顾可访问性与体验。
悬浮按钮（Floating Action Button，FAB）在现代网页中不是装饰品，而是关键交互入口；但直接套用 CSS position: fixed 很容易导致遮挡内容、滚动错位、移动端点击失效——核心问题不在“怎么浮起来”，而在“怎么浮得稳、点得准、不碍事”。
为什么 position: fixed 一加就出问题？
固定定位看似简单，但实际场景中常触发三类隐性故障：
- 页面有横向滚动时，
fixed元素不随视口水平移动，悬停位置偏移 - 键盘弹出（尤其 iOS Safari）、软键盘收起后，
fixed按钮卡在错误 Y 坐标，甚至被遮住 - 父容器设置了
transform或perspective，会创建新的 containing block，使fixed失效，退化为相对定位
真正稳妥的做法是：优先用 position: absolute 配合一个明确的定位上下文（如 body 或根级容器），再用 viewport 单位 + scroll-padding-bottom 补偿滚动与输入法干扰。
如何让按钮始终贴右下角且不遮正文？
关键不是“绝对定位到右下”，而是“预留安全边距并响应式适配”。推荐结构如下：
立即学习“前端免费学习笔记（深入）”；
<div class="fab-container"> <button class="fab">+
对应 CSS：
-
.fab-container设为position: relative，挂载在body直接子级（避免嵌套 transform 干扰） -
.fab使用position: absolute+bottom: env(safe-area-inset-bottom, 16px)，兼容刘海屏与 iOS 安全区 - 加
scroll-margin-bottom: 80px（而非margin-bottom），确保滚动到末尾时按钮不盖住最后一行文字
流光动画别用 box-shadow 叠多层
常见写法是堆 3–4 层 box-shadow 模拟辉光，但会导致渲染性能骤降，尤其在低端 Android 设备上掉帧。更轻量的方案是：
- 用
filter: blur(8px)+opacity: 0.7生成基础光晕，再套一层伪元素::after做径向渐变扩散 - 动画只驱动
transform: scale()和opacity，避开重绘区域 - 务必加
will-change: transform，但仅在 hover 状态下启用，避免常驻开销
示例关键帧：
@keyframes fab-glow {
0% { transform: scale(1); opacity: 0.9; }
100% { transform: scale(1.05); opacity: 1; }
}
移动端点击区域至少 48px × 48px，但视觉尺寸可以更小
很多设计稿把 FAB 做成 36px 圆形，结果用户频繁点空——这不是手抖，是违反 WCAG 2.1 触摸靶区规范。解决方法很直接：
- 保持视觉元素（
.fab::before）尺寸为设计值（如36px） - 用
padding或伪元素撑开点击热区，确保min-width和min-height≥48px - 禁用
-webkit-tap-highlight-color: transparent，但保留默认点击反馈（iOS 不触发:active时靠它补足）
真正难的是边缘 case：比如悬浮按钮叠在视频播放器上方，或和原生系统返回手势冲突——这时候不能硬加 z-index，得结合 pointer-events: none 在特定状态临时让渡控制权。
