必须用 position: fixed。它使按钮脱离文档流、始终相对视口定位，滚动时保持右下角悬浮；absolute 会随滚动偏移，需挂载到 body 下并设 bottom/right 偏移及高 z-index 防遮挡。
悬浮客服按钮该用 position: fixed 还是 position: absolute
必须用 position: fixed。它让按钮脱离文档流、始终相对于视口定位，滚动页面时仍能“粘”在右下角；而 position: absolute 会随父容器或文档滚动偏移，实际效果等同于没悬浮。
常见错误是把按钮塞进某个 抖动主因是展开面板瞬间触发了 很多模板在 PC 端正常，一到 iPhone 就错位或点不中——根本原因是未处理 立即学习“前端免费学习笔记（深入）”； 别堆三个图标挤在一起。真实场景中用户只需要「最快触达方式」，应按设备类型动态切换行为： 注意：微信内直接 真正难的是状态同步——比如用户在微信里扫完码，客服系统是否立刻标记为“已接入”？这取决于后端对接，前端只负责把入口跑通。absolute，结果一滚动就消失。正确做法是将按钮直接挂载在 下，或至少确保其最近的非 static 定位祖先为 或 。
bottom: 20px 和 right: 20px 是最稳妥的起始偏移值，避开移动端底部手势栏z-index: 9999 防止被轮播图、弹窗等遮挡（尤其注意某些 UI 框架默认 z-index 值偏低）top + bottom 同时存在，会导致浏览器计算冲突，表现不稳定点击展开客服面板时，如何防止页面内容被遮挡或抖动
body 滚动条出现/消失，导致视口宽度变化（尤其在 Windows Chrome 中明显）。解决关键是「不改变 body 流式布局」。
position: fixed 单独定位，不嵌套在按钮内部，也不依赖父容器尺寸 添加 overflow: hidden，但必须同步补上 padding-right: 17px（滚动条宽度），否则页面会左移.kf-panel--open 控制面板，.body--no-scroll 控制 body，用 JS 切换而非内联样式，便于调试移动端适配要注意哪些 HTML 和 CSS 细节
viewport 缩放和点击区域物理尺寸。
存在且未被覆盖padding 扩展可点范围，别只靠 width/height
touch-action: manipulation，既提升响应速度，又防止误触触发缩放hover 做显示逻辑（移动端无 hover），改用 click 或 focus-within（需检查兼容性）怎么让悬浮按钮支持微信扫码、电话拨打、在线聊天三合一
location.href 跳转二维码页比弹出层更可靠；Android 唤起电话需确认系统已安装拨号应用，否则静默失败；网页聊天框建议预加载脚本，避免点击后白屏等待。
