position: fixed 偏移因祖先元素含 transform/perspective/filter 导致降级定位；右下角应使用 clamp() 和 env(safe-area-inset-bottom) 响应式适配；弹窗需与悬浮球同级挂载 body 并设更高 z-index。
客服悬浮球用 position: fixed 为什么总偏移？
因为 fixed 是相对于视口定位，但很多人忘了父容器有 transform、perspective 或 filter——只要任意祖先元素带这些属性，fixed 就会降级为相对该祖先定位，导致坐标错乱。
- 检查 DOM 结构里从
到悬浮球之间的所有父级，运行getComputedStyle(el).transform !== 'none'快速排查 - 最稳妥的解法是把悬浮球挂到
document.body直接子级，绕过中间干扰层 - 如果必须嵌套，就改用
position: absolute+getBoundingClientRect()动态计算视口坐标（需监听scroll和resize）
右下角定位的 right 和 bottom 值怎么设才不遮挡内容？
硬写 right: 20px; bottom: 20px 很容易和页面滚动条、系统缩放、iOS 安全区域冲突，尤其在小屏或横屏时被截断。
- 用
right: clamp(20px, 5vw, 40px)替代固定值，兼顾响应与可读性 - iOS Safari 需额外加
padding-bottom: env(safe-area-inset-bottom)到 body，并在悬浮球上加bottom: calc(20px + env(safe-area-inset-bottom)) - 避免用
%值（如right: 5%），它基于父容器宽度，而fixed的父容器是视口，但百分比在某些安卓 WebView 中解析异常
点击客服球后弹窗盖不住其他 fixed 元素？
本质是 z-index 层级没理清。悬浮球本身 z-index 再高，弹窗如果插在低层级容器里，照样被压。
- 确保弹窗 DOM 节点也直接挂载在
document.body下，和悬浮球同级 - 给悬浮球设
z-index: 2147483647（最大安全整数），弹窗设z-index: 2147483648—— 不要用999或9999，老版本 Chrome 对小z-index有渲染 bug - 禁用所有全局
* { z-index: auto }重置规则，这种 CSS 会破坏fixed元素的层叠上下文预期
移动端点击区域太小，:active 反馈不明显
默认 <div> 或 <code><button></button> 的点击热区只有图标大小，手指操作极易误触或无响应，且 :active 样式在 iOS 上默认被忽略。
- 给悬浮球容器加
touch-action: manipulation，激活快速点击优化 - 用
::after伪元素撑开点击区域：.kefu-ball::after { content: ''; position: absolute; inset: -12px; }（扩展 12px 热区） -
:active要配合-webkit-tap-highlight-color: transparent才生效，否则 iOS 会覆盖你的样式
实际最难调的不是定位，是不同机型下 env(safe-area-inset-*) 的兼容性表现和 transform 祖先对 fixed 的隐式劫持——这两处不逐设备验证，上线后必出问题。
