悬浮按钮必须用 fixed 定位以确保视口内固定显示，避免父级裁剪；需宽高相等加 border-radius: 50% 实现正圆；点击区应 ≥44×44px 并添加 aria-label；阴影与动画须精简且适配无障碍。
悬浮按钮的定位必须用 fixed 而不是 absolute
用 absolute 定位时，按钮会随页面滚动消失；只有 fixed 才能真正“悬浮”在视口固定位置。常见错误是套在某个相对定位的容器里，结果被父级裁剪或偏移。
- 始终将按钮的父容器设为
body直接子元素（或确保其祖先无transform/filter/will-change，否则会触发新的定位上下文） - 推荐写法：
position: fixed; bottom: 24px; right: 24px;，避免用top/left配合百分比，容易在小屏上溢出 - 若需适配移动端，可加媒体查询：
@media (max-width: 768px) { right: 16px; bottom: 16px; }
圆形靠 border-radius: 50% 实现，但宽高必须相等
只写 border-radius: 50% 不够——如果 width 和 height 不一致，得到的是椭圆。很多初学者误以为“50% 就是圆”，其实它表示“宽高各自的一半”，所以必须强制等值。
- 最稳妥写法：
width: 56px; height: 56px; border-radius: 50%; - 用
aspect-ratio: 1是新方案，但 Safari 15.4+ 才支持，生产环境建议暂不依赖 - 图标居中别只靠
text-align: center，要配合line-height或display: flex，否则文字或 SVG 偏移
点击区域和可访问性常被忽略
视觉上是个小圆，但手指或鼠标点不准就等于没做。WCAG 要求最小点击区域 ≥ 44×44px，而很多人只按视觉尺寸设宽高。
- 用
padding扩展点击区：比如视觉直径 56px，可设width: 44px; height: 44px; padding: 6px;，总占位仍为 56px - 必须加
aria-label，例如：<button aria-label="返回顶部"></button>，否则屏幕阅读器无法识别功能 - 禁用状态要用
disabled属性 + CSS 灰色样式，而不是仅靠opacity: 0.5，否则仍可聚焦、可点击
阴影和动效别堆太多，尤其在低端设备上
box-shadow 多层叠加或 transform: scale() 过渡，在 Android 中低端机上容易掉帧。悬浮按钮本该轻量，但常被设计稿带偏。
立即学习“前端免费学习笔记（深入）”；
- 阴影建议最多两层：
box-shadow: 0 2px 8px rgba(0,0,0,0.15), 0 0 0 2px rgba(0,0,0,0.05); - 悬停动画用
transform: translateY(-2px)比top更高效；过渡仅限transform和opacity - 务必加
prefers-reduced-motion降级：@media (prefers-reduced-motion: reduce) { transition: none; }
