position: fixed 是唯一靠谱的选择，因其始终相对于视口定位，不受滚动、缩放、tab切换影响；absolute 受已定位祖先干扰，float 不脱离文档流且无法固定右下角。
直接用 position: fixed 是唯一靠谱的选择，其他方式在真实项目里基本会失效。
为什么不能用 position: absolute 或 float
position: absolute 看似能精确定位，但它依赖最近的「已定位祖先元素」——只要父容器加了 transform、perspective 或 will-change，客服浮窗就会立刻变成相对该容器定位。典型现象包括：Modal 弹出后上移、iOS Safari 中消失、Chrome 新标签页里跳到左上角。
float 根本不脱离文档流，在现代 flex/grid 布局中直接失效；它也无法固定在视口右下角，滚动时会随内容移动，甚至被内容“挤走”。
只有 fixed 始终相对于视口，滚动、缩放、切换 tab 都不影响位置稳定性。
right 和 bottom 的安全值怎么设才不压住系统 UI
写死 right: 20px; bottom: 20px 在小屏或高缩放比下容易压住 iOS 底部手势栏、Windows 任务栏或浏览器滚动条。
- 桌面端基础值建议用
right: 24px; bottom: 24px（比 20px 更宽松） - 移动端适配必须加媒体查询：
@media (max-width: 768px) { bottom: 80px; }，避开 iOS 安全区 - 缩放鲁棒性可选
right: calc(1.5vw + 12px)，兼顾小屏收缩和大屏留白 - WebApp 场景可加
<meta name="viewport" content="user-scalable=no">防止用户缩放干扰
垂直居中别用 transform: translateY(-50%)
常见写法 top: 50%; transform: translateY(-50%) 有两个硬伤：
- 客服状态文字变长、头像尺寸动态变化时，
transform不触发布局重排，视觉上就偏了 - 旧版 Safari（iOS 12–13）中，
transform可能导致z-index分层异常，被其他fixed元素盖住
更稳的替代方案：
— 若高度固定为 130px，用 top: 50%; margin-top: -65px
— 或外层 display: flex; flex-direction: column; justify-content: center 包裹子内容
微信内置浏览器必须额外处理的三件事
微信公众号页面中，fixed 定位常出现“随页面滚动”或“被键盘顶飞”，这不是 CSS 写错了，而是内核限制：
- 浮窗 DOM 必须在
DOMContentLoaded后插入，避免 JS-SDK 初始化前就渲染导致错位 - 第三方 SDK（如智能体对话）务必等
wx.ready()触发后再绑定事件，否则点击无响应 - 移动端必加两个属性：
touch-action: manipulation（防滑动卡顿）、cursor: pointer; user-select: none（iOS 点击反馈 + 防误选） -
z-index必须设为极高值（实测至少2147483647），否则在某些 iOS 微信版本中会被底部导航栏或键盘遮挡，且毫无报错提示
最易被忽略的是：安全距离和 z-index 层级不是“写了就行”，而是要结合设备特性、运行环境、SDK 加载时机一起验证——尤其在微信里，少一步都可能让按钮“消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
