必须用position: fixed而非absolute或float，因为只有fixed真正相对于视口定位，不受滚动、缩放、Modal弹出、tab切换影响；absolute在父级含transform等属性时会降级为相对父级定位，float不脱离文档流且无法锚定视口右下角。
为什么必须用 position: fixed 而不是 absolute 或 float
只有 position: fixed 是真正相对于视口定位的，滚动、缩放、打开 Modal、切换 tab 都不影响位置。一旦父级元素加了 transform、perspective 或 filter，absolute 就会降级为相对该父级定位——常见现象是客服图标在 Modal 弹出后突然上移，或在 iOS Safari 中消失。float 根本不脱离文档流，在 flex/grid 布局里直接失效，且无法锚定视口右下角。
right 和 bottom 必须同时设置，不能只写一个
只设 position: fixed 不会自动停在右下角；只设 bottom: 20px 会让元素贴左，容易误判为“没生效”；只设 right: 20px 则默认 top: auto，元素可能卡在右上角甚至不可见。
- 正确写法：
right: 20px; bottom: 20px; - 避免用百分比（如
right: 5%），缩放或横屏时偏移错乱 - 移动端需适配安全区：
bottom: max(20px, env(safe-area-inset-bottom));
z-index 不够高，会被轮播图、弹窗、第三方 SDK 遮挡
很多项目默认 z-index: 100 或 999，但现代 UI 组件（如 Ant Design Modal、Swiper 轮播）常设 z-index: 1050+。客服浮窗若没压过它们，就会被遮住。
- 建议起步值：
z-index: 9999; - 注意层叠上下文：如果父容器有
transform或opacity: 0.99，它会创建新层叠上下文，导致子元素的z-index失效 - 检查是否被
iframe（如地图、视频嵌入）遮挡——iframe默认在最高层，需加allow="clipboard-write"并确保其z-index低于浮窗
移动端键盘弹出时浮窗被顶出屏幕底部
iOS 和 Android 键盘弹出会收缩视口高度，bottom: 20px 仍按收缩后的视口计算，结果浮窗卡在键盘上方甚至被截断。
立即学习“前端免费学习笔记（深入）”；
- 基础防御：
min-height: 100vh;在根容器上防止内容塌陷 - 更可靠方案：监听
resize事件，检测window.innerHeight突变，动态调整浮窗bottom值 - 必须加
touch-action: manipulation;和cursor: pointer; user-select: none;，否则部分安卓机型点击无响应
div.chat-float {
position: fixed;
right: 20px;
bottom: max(20px, env(safe-area-inset-bottom));
z-index: 9999;
touch-action: manipulation;
}
父级有 transform 的页面结构，是 fixed 定位失效最隐蔽也最常见的原因——它不会报错，只是悄悄“失联”。 
