必须用position: fixed而非absolute，因其直接相对于视口定位，确保悬浮按钮始终停在右下角不随滚动偏移；absolute依赖最近已定位祖先，受transform、overflow等影响易错位或消失。
为什么用 position: fixed 而不是 position: absolute
因为悬浮按钮要“始终停在视口右下角”，不随页面滚动而消失。position: absolute 依赖最近的已定位祖先，一旦父容器有 transform、overflow 或 position: relative，按钮就可能错位或被截断；而 position: fixed 直接相对于视口定位，不受文档流和父级影响——这是唯一可靠方案。
常见错误是把按钮塞进某个 div 里再设 absolute，结果一滚动就不见，或者 iOS 上因 overflow: hidden 父容器导致按钮直接消失。
bottom 和 right 必须同时设置，不能只写一个
只设 bottom: 20px 不写 right，浏览器不知道水平方向停在哪，可能默认贴左或居中，行为不可控。同理，只设 right 不设 bottom，垂直位置会塌到顶部或继承父级 margin。
- 推荐写法：
bottom: 24px; right: 24px;—— 留出可点击空间，避免贴边难触达 - 别用
left+bottom再配合calc(100vw - 60px)这类计算，移动端缩放时易错位 - 尺寸建议用固定像素（如
width: 48px; height: 48px;），不用%或em，防止缩放后按钮过小或溢出
z-index 设多少才不遮挡也不被遮挡
z-index: 1000 是安全起点，但不是越高越好。设成 9999 可能压住模态框（z-index: 1050）、下拉菜单（z-index: 1060）甚至系统级弹窗。
实际应查页面已有最高 z-index 值（用浏览器开发者工具 inspect → computed → z-index），然后设为比它高 10–50 即可。
- 如果页面用了 Bootstrap，它的
.modal默认是z-index: 1050，那按钮至少设1060 - 避免父容器触发层叠上下文（比如有
transform、opacity 、<code>will-change），否则按钮的z-index在该容器内才生效，对外无效 - 移动端 Safari 对
z-index解析更敏感，测试时务必真机验证
滚动时动态显隐的 JS 控制要点
用户没滚多远时显示返回顶部按钮，反而干扰阅读。用 window.scrollY > 300 控制显隐是通用做法，但要注意性能和兼容性。
- 监听
scroll事件必须节流（throttle），否则高频触发拖慢页面；可用setTimeout或requestAnimationFrame包一层 - 初始状态建议设
opacity: 0; pointer-events: none;，而不是display: none;，避免重排（reflow） - 点击后执行
window.scrollTo({ top: 0, behavior: 'smooth' });，IE 不支持behavior: 'smooth'，需 fallback 到window.scrollTo(0, 0) - 别在按钮上挂重型逻辑（如 fetch、复杂 DOM 操作），滚动中触发容易卡顿
真正麻烦的不是定位本身，而是按钮和页面其他交互组件之间的层级与事件冲突——比如模态框弹出时按钮还在，或者 touch 事件在 iOS 上穿透失效。这些细节不测到真机、不看 computed styles，很容易上线才发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
