悬浮按钮应使用 position: fixed 并设 bottom/right 值和 z-index，语义化用 标签配合 aria-label，iOS 需加 min-height: 100vh 防粘滞，避免内嵌重型组件或监听 scroll。
悬浮按钮用 position: fixed 最直接
想让按钮始终停在屏幕某个角落（比如右下角），position: fixed 是唯一可靠选择。它脱离文档流，不随滚动条移动，也不受父容器定位影响。
常见错误是误用 position: absolute——它依赖最近的已定位祖先，一滚动就消失；或者忘了加 z-index，结果被其他内容遮住。
- 必须设置
top/right/bottom/left至少两个值，否则位置不确定 - 推荐用
bottom: 20px; right: 20px;避免贴边难点击 -
z-index: 999足够应付大多数场景，但若页面有模态框（z-index: 1000+），需同步调高
HTML5 语义化写法：用 <button></button> 而非 <div>
<p>悬浮按钮本质是可交互控件，应使用 <code><button></button> 标签。它自带焦点、键盘响应（Enter/Space 触发）、无障碍支持（aria-label 可补全说明）。
用 <div> + <code>onclick 不仅增加 JS 维护成本，还会在屏幕阅读器中被忽略，或无法用键盘操作。
立即学习“前端免费学习笔记（深入）”；
- 写成
<button type="button" aria-label="返回顶部">↑</button>，比空<div> 更健壮 <li>避免 <code>type="submit"，除非真要提交表单；默认行为会刷新页面 - 配合 CSS 的
cursor: pointer和:focus-visible样式，提升可访问性 - 给
加min-height: 100vh，确保至少一屏高 - 按钮容器外层套一个
position: sticky的占位元素（仅作兜底，不影响逻辑） - 慎用
transform: translateZ(0)强制硬件加速——可能引发输入框失焦或滚动卡顿 - 按钮本身只保留触发逻辑，弹窗内容用
display: none或hidden控制显隐 - 动画优先用 CSS
transform和opacity，避开top/left/width重排 - 监听
scroll事件做按钮显隐？改用IntersectionObserver或节流更稳妥
移动端适配：避免 fixed 在 iOS Safari 中“粘滞”
iOS Safari 对 position: fixed 有特殊处理：滚动时可能延迟重绘，导致按钮短暂消失或错位，尤其在页面高度不足一屏时。
这不是 bug，而是浏览器为省电做的优化。解决思路不是禁用 fixed，而是加一层“稳定锚点”。
性能注意：别在悬浮按钮里放重型组件
固定定位元素会频繁参与合成层计算。如果按钮内部嵌了轮播图、实时图表或未优化的 SVG 动画，会导致滚动掉帧，尤其低端安卓机上明显。
典型反例：把整个客服弹窗（含 iframe 聊天窗口）塞进悬浮按钮 DOM 结构里。
fixed 按钮在地址栏收起/展开瞬间会跳动一次，这没法完全消除，只能靠预留安全边距和视觉缓冲来弱化感知。
