必须用position: fixed实现客服悬浮窗，因其唯一可靠地相对于视口定位；需设right: 20px、bottom: 20px并显式指定高z-index（如9999），避免absolute错位、sticky失效及margin/transform导致的交互异常。
悬浮窗需要固定定位 + 右下角坐标控制
网页客服悬浮窗本质是脱离文档流的固定层，position: fixed 是唯一可靠方案。用 absolute 会随滚动消失，用 sticky 在多数场景下不生效。
关键参数必须显式设置：right: 20px、bottom: 20px，不能依赖 margin 或 transform 模拟位置——后者会导致点击区域偏移或 z-index 失效。
- 避免写成
right: 0，否则可能被浏览器右侧滚动条遮挡（尤其 Windows） - 如果页面有底部固定导航栏，
bottom值需大于其高度，否则被盖住 - 移动端建议加
max-width: 90vw防止超出屏幕
客服按钮和展开面板要分层且可交互
一个悬浮窗至少包含两层：常驻的触发按钮（如「在线客服」图标），以及点击后展开的对话面板。二者必须用不同 z-index，且面板需设 display: none 初始隐藏。
常见错误是把按钮和面板写在同一元素里，导致无法独立控制显隐，或事件监听失效。
- 按钮用
<button></button>或带role="button"的<div>，确保可访问性 <li>面板容器加 <code>tabindex="-1"，方便 JS 聚焦关闭 - 点击面板外部区域关闭时，注意
event.target === panel才执行关闭，避免误关 - 打开面板后，用
panel.focus()把焦点移入，防止键盘操作失焦 - 关闭时记得恢复上一个聚焦元素（可用
document.activeElement缓存） - 不要用
visibility: hidden隐藏面板——它仍占 tab 键顺序；改用display: none或aria-hidden="true" - 按钮最小尺寸设为
min-width: 44px、min-height: 44px - 用
@media (max-width: 768px)单独加大right和bottom值，避免贴边被手势操作遮挡 - 避免在面板内放
iframe客服系统，iOS 下 iframe 内部 touch 事件常被拦截，优先用 API 接入消息逻辑
JS 控制显隐时别漏掉键盘支持
只响应鼠标点击不够。用户按 Esc 关闭、用 Tab 进入面板、回车提交消息——这些都得手动处理，否则不符合 WCAG 基础要求。
原生 click 事件无法捕获 Esc，必须监听 keydown 并过滤 event.key === 'Escape'。
移动端适配的关键不是缩放而是触控区域
悬浮窗在手机上最常出问题的不是大小，而是点击热区太小。iOS Safari 对 touchstart 有最小 44×44px 触控识别阈值，低于此值容易点不中。
单纯给按钮加 padding 不够，必须确保整个可点击区域满足尺寸，且不能靠 transform: scale() 补偿——这会放大但不扩大实际命中区。
z-index: 999 就完全失效。动手前先查 getComputedStyle(document.body).zIndex 看全局基准。
