核心是用 position: fixed，使按钮脱离文档流并锚定视口，滚动不变位；必须成对设置两个方向偏移（如 bottom: 24px; right: 24px），兼顾尺寸、安全边距、safe-area 适配、z-index 合理层级、语义化 html 与可访问性。
要用定位属性制作固定悬浮按钮，核心是用 position: fixed，它让按钮脱离文档流、直接锚定在浏览器视口上，滚动时位置丝毫不变。
必须同时设置两个方向偏移
只写 bottom: 24px 不够，浏览器不知道水平位置；只写 right: 24px 也不行，垂直方向会塌到顶部。必须成对设置：
- 右下角：用
bottom: 24px; right: 24px; - 左下角：用
bottom: 24px; left: 24px; - 全宽底部条：用
bottom: 0; left: 0; right: 0;（此时还需给body加padding-bottom避免遮挡正文）
尺寸与可触达性要稳
移动端手指点按、桌面端鼠标悬停都要兼顾：
- 推荐固定尺寸：
width: 48px; height: 48px;（不用 %、em、rem） - 圆角建议
border-radius: 50%;，视觉友好且符合触控靶区标准 - 留出安全边距：24px 是常见起始值，避免紧贴屏幕边缘难触发
- 适配刘海屏/小黑条：写成
bottom: calc(24px + env(safe-area-inset-bottom));
层级和显示控制不能马虎
z-index 不是越高越好，显隐逻辑也不能靠暴力操作：
- 查清页面已有最高 z-index（如 Bootstrap modal 是 1050），按钮设为
z-index: 1060即可 - 避免父容器有
transform、opacity 等，否则会截断层叠上下文，让 z-index 失效 - 初始隐藏别用
display: none，改用opacity: 0; pointer-events: none;，防止重排 - 监听滚动时务必节流，推荐用
requestAnimationFrame包一层，判断条件如window.scrollY > 300
语义与兼容性要兜底
一个合格的悬浮按钮不只是“能看”，还要“能用、能读、能访问”：
- HTML 结构必须用
<button></button>，不是<div> 或伪元素 <li>加上 <code>aria-label="返回顶部"，屏幕阅读器才可识别 - 点击行为用
window.scrollTo({ top: 0, behavior: 'smooth' });，IE 不支持时 fallback 到window.scrollTo(0, 0) - 图标优先用内联 SVG，缩放不失真；禁用字体图标或图片引用
