position: fixed元素未贴右边缘的根本原因是祖先元素设置了transform/perspective/filter，导致其相对该父级而非视口定位；应检查Computed面板、移至body下或改用sticky替代。
直接用 right: 0 就能靠右，但实际项目里出问题的从来不是这行代码，而是它被祖先元素“劫持”了定位上下文。
position: fixed 元素为什么没贴着视口右边缘？
根本原因：只要任意父级（哪怕只是 body 的某个 wrapper）加了 transform、perspective 或 filter（包括 transform: translateZ(0) 这种硬件加速写法），position: fixed 就会降级为相对该父级定位，而不是视口。
- 打开浏览器开发者工具，切到 “Computed” 面板，确认
position确实是fixed，且top/right值已生效 - 检查 DOM 结构，把固定元素直接挂到
下，避开所有带transform的容器 - 如果无法改结构，用
top: calc(50vh - 65px)替代transform: translateY(-50%)，绕过 transform 干扰
右下角 vs 右侧中间：参数怎么选？
右下角适合操作按钮（如客服入口），右侧中间适合长条形侧边栏——它们的定位逻辑完全不同，混用会导致偏移或错位。
- 右下角：用
bottom: 20px+right: 20px+z-index: 9999；别设成999999，否则可能压住视频控件或 devtools - 右侧中间：必须用
top: 50%+right: 20px+transform: translateY(-50%)，且元素高度要固定；否则transform偏移不可控 - 移动端要单独处理：
@media (max-width: 768px)下把bottom改成80px，留出手指操作区
z-index 和 DOM 结构最容易踩的坑
悬浮窗藏在别人后面，90% 不是 z-index 设小了，而是 stacking context 被父容器提前创建了。
-
z-index只对定位元素（position不是static）生效，且只在同一个 stacking context 内比较 - 如果父容器有
z-index（哪怕只是1），而你的悬浮窗z-index是9999，照样会被盖住 - 第三方客服 SDK（如美洽）必须等
DOMContentLoaded后再加载，否则可能插入到错误位置，导致样式失效 - 用
touch-action: manipulation和user-select: none防止移动端误触拖拽
真正难的不是写 right: 0，而是确保它真的相对于视口生效——这取决于你能不能控制整个 DOM 树里有没有一个悄悄加了 transform 的 wrapper。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
