用position: fixed而非absolute，因其始终锚定视口、不随滚动偏移且不受transform等父级干扰；bottom和right推荐设为24px确保安全间距，配合z-index: 999、box-shadow及cursor: pointer，并注意触摸热区不小于44×44px。
为什么用 position: fixed 而不是 absolute
因为 absolute 依赖最近的已定位祖先元素，一旦页面有 transform、will-change 或 perspective 的父容器，按钮就会“锚定”到那个父级，滚动时飘移甚至卡在半空；而 fixed 始终锚定视口，不随滚动偏移——这是唯一能保证右下角位置稳定的方案。
bottom 和 right 值设多少才安全
别用 0 贴边，也别用百分比或 vw。iOS Safari 对视口单位解析不稳定，且贴边会遮挡系统任务栏或浏览器滚动条。推荐统一用 px：
-
bottom: 24px、right: 24px是最小安全间距，兼顾点击可达性与视觉留白 - 若按钮图标较大（如含文字或 SVG），显式设死
width和height，避免字体渲染差异导致宽高浮动 - 移动端可单独用媒体查询加大间距：
@media (max-width: 768px) { bottom: 80px; }，防止误触底部导航栏
怎么让它「不占空间」又不遮内容
它本就不占文档流空间——fixed 元素天然脱离布局。但常见错误是手动给 body 加 padding-right，结果在缩放或窄屏下触发横向滚动条。正确做法只约束按钮自身：
- 不设
margin、padding干扰布局流，只靠bottom/right定位 - 加
z-index: 999足够（别堆到 999999），高于主内容层即可，过高易与第三方弹窗冲突 - 必须加
box-shadow或边框，纯色圆按钮在复杂背景上极易不可见 - 用
cursor: pointer，否则用户可能意识不到它是可点击控件
移动端点击失效或点不准怎么办
不是 JS 问题，是 CSS 触摸目标尺寸不达标。WCAG 要求最小点击区域为 44×44px，但很多按钮只设了 24×24px 图标：
立即学习“前端免费学习笔记（深入）”；
- 把按钮本身设为
width: 56px; height: 56px，再用flex居中图标，确保触摸热区达标 - 避免用
font-size控制大小，不同字体渲染下高度浮动；显式设宽高更稳 - iOS Safari 中，若页面高度不足一屏，
fixed按钮可能“粘滞”消失：给body加min-height: 100vh即可稳定锚点 - 慎用
transform: translateZ(0)强制硬件加速——可能引发输入框失焦或滚动卡顿
mousemove 监听器，造成内存泄漏；关闭时用 remove() 而非 display: none，下次 show 又得重新绑定事件。这些细节不处理，上线后就是偶发 bug 的源头。 
