用 position: fixed 实现右下角浮动按钮，需设 right/bottom、z-index≥9999、transform: translatez(0)，扩展点击区并加 touch-action: manipulation，按微信/企微/sdk渠道对接跳转逻辑，排查 overflow 或全局样式干扰。
直接用 position: fixed + 简单 DOM 结构就能实现，不需要框架或第三方库；但真正在生产环境跑得稳，关键在 z-index 层级、移动端点击热区、以及避免遮挡关键操作按钮。
怎么让按钮固定在右下角不随滚动移动
核心是 CSS 的 fixed 定位，不是 absolute 或 sticky —— 后两者在滚动或容器变换时容易偏移。
-
right: 20px和bottom: 20px是安全起始值，留出系统状态栏和手势返回区空间 - 必须显式设置
z-index: 9999（或至少高于你页面最高 z 值），否则可能被弹窗、广告 banner 盖住 - 别忘了加
transform: translateZ(0)或will-change: transform，防止 iOS Safari 渲染层错乱导致按钮闪烁
点击区域太小，手机上总点不中怎么办
默认按钮宽高 56px 在桌面够用，但在 iPhone 上拇指热区远大于此，:active 伪类也不足以补救。
- 用
padding: 16px扩展点击区域，视觉尺寸不变，但实际响应区变大 - 给
<button></button>或<a></a>外层再包一层<div>，设为 <code>width: 80px; height: 80px;并隐藏溢出，内部居中按钮 - 务必加
touch-action: manipulation，禁用双指缩放干扰，提升点击响应速度 - 微信公众号内：检测
wechatUA，用location.href = 'https://wpa.qq.com/msgrd?v=3&uin=xxx'会失效，得走openCustomerServiceChatJS-SDK 接口（需鉴权） - 企业微信：调用
wx.miniProgram.navigateTo跳小程序客服，或用location.href = 'https://work.weixin.qq.com/kf/q/xxx'（注意链接有效期） - 第三方 SDK（如美洽、快商通）：确保其
init()已执行，再绑定按钮onclick触发kefu.show()，别在 DOM 加载前就调用 - 检查是否被
body { overflow-x: hidden }截断（尤其 Next.js / Remix 默认布局） - Vue/React 组件中若用了
v-if或display: none控制显隐，记得同步更新z-index和定位上下文 - 部分 CMS（如 WordPress 主题）会注入全局
* { position: relative }，导致fixed按钮相对父容器定位——加position: fixed !important临时解，但最好找源头改
怎么对接微信客服、企业微信或在线聊天 SDK
浮动按钮本身只是触发器，真正跳转或初始化逻辑要按渠道分情况处理，不能一概而用 window.open。
为什么按钮在某些页面突然消失或错位
常见不是代码写错，而是被其他样式或脚本意外覆盖。
最麻烦的其实是“看起来没问题，但用户反馈点不动”，往往卡在微信内置浏览器对 iframe 内嵌客服页的权限限制，或者企业微信链接没带 from=singlemessage 参数被拦截。这些没法靠 CSS 解决，得查渠道文档+真机抓包验证。
