position: fixed 必须配 z-index 和显式方向值，因其默认定位在视口左上角且不自动分层；z-index 至少设 1000 才能压住主流 ui 库弹窗，而 right 或 bottom 必须显式设置（不可仅写 position: fixed），否则元素不可见或被遮挡。
直接用 position: fixed 就能实现，但绝大多数人卡在 z-index 被遮、移动端错位、滚动条被盖这三处，不是代码写不对，是没处理好上下文。
为什么 position: fixed 必须配 z-index 和显式方向值
只写 position: fixed 不会自动贴右下角——它默认堆在视口左上角。必须手动设 right 或 bottom（别同时设 top 和 bottom，浏览器可能忽略其中一个）。z-index 至少要 1000，因为 Element Plus 的弹窗默认是 2000，Ant Design 是 1000，不设够就压不住。
- 错误写法：
style="position: fixed"—— 缺定位值，元素不可见 - 危险写法：
z-index: 999—— 够不到主流 UI 库的 modal 层级 - 隐蔽坑：
transform: translateZ(0)会创建新层叠上下文，导致父容器的z-index失效
移动端右下角悬浮按钮怎么避免被虚拟按键/滚动条挡住
iOS Safari 地址栏收起时会重算视口高度，安卓部分机型滚动条宽度不固定，right: 20px 在某些设备上会让按钮悬空或半截被切。不能靠猜，得动态算。
- 保守方案：用
right: calc(20px + 17px)，但 Windows 滚动条宽约 17px，macOS 是 0，iOS 是 0 - 通用方案：JS 计算真实滚动条宽度：
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth，再设right: ${20 + scrollbarWidth}px - 小屏适配：iOS Safari 中 fixed 元素易抖动，给
html加height: 100%; overflow-x: hidden可缓解
客服悬浮窗点不开、关不掉的三个硬性条件
不是 JS 写错了，是 DOM 挂载位置、事件绑定方式、CSS 阻断规则没对齐。第三方客服 SDK（如美洽、七鱼）几乎都要求这三点同时满足。
- 挂载点必须是
document.body直接子节点，不能嵌在div#app或 Vue/React 的根容器里，否则overflow: hidden会截断面板 - 入口按钮必须带厂商约定的 data 属性，比如美洽是
data-meiqia-open="true"，自己写onclick="window.meiqia.open()"会报undefined - 脚本必须放
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
