position: fixed 是唯一可靠的悬浮定位方式，因其在滚动、缩放等场景下始终相对于视口定位；但若祖先元素存在 transform、perspective 或 filter，fixed 元素会改为相对该祖先定位，导致偏移。
position: fixed 是唯一可靠的方式，其他方案（比如 position: absolute 或 float）在滚动、缩放、弹窗出现或父容器加 transform 时都会失效——这不是 bug，是规范行为。
为什么 right: 20px + top: 50% + transform: translateY(-50%) 垂直居中会偏移？
根本原因不是写法错，而是祖先元素悄悄改了定位基准：只要任意父级有 transform、perspective 或 filter（哪怕只是 transform: translateZ(0) 做硬件加速），position: fixed 就会相对于那个父级定位，而不是视口。
- 检查开发者工具的 “Computed” 面板，确认
position确实是fixed，且没被覆盖 - 把悬浮窗直接挂到
<body>下，别嵌套太深；尤其避开带transform的 wrapper - 垂直居中优先用
top: 50%; right: 20px; transform: translateY(-50%)，但前提是父级没干扰 - 若无法控制祖先样式，改用
top: calc(50vh - 65px)（假设高 130px），绕过 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，留出手指操作区 - 千万别用
left: auto—— 浏览器不识别这个值，right才是明确声明
DOM 结构和 z-index 容易踩的坑
结构不对，再好的 CSS 也白搭；z-index 设错，悬浮窗就藏在别人后面。
立即学习“前端免费学习笔记（深入）”；
- 悬浮容器必须是独立
<div>，别塞进<header>或<main>里——这些容器常带transform或will-change -
z-index只对定位元素生效，且只在同一个 stacking context 内比较；如果父容器有z-index且值比你小，你的悬浮窗照样被盖住 - 第三方客服 SDK（如美洽、快商通）必须等
DOMContentLoaded后再加载脚本，否则可能插入到错误位置 - 用
touch-action: manipulation和user-select: none防止移动端误触拖拽
滚动时动态调整 bottom 值的必要性
固定在右下角的悬浮球，如果页面顶部有吸顶导航栏（比如高 60px），滚动后会被遮住——不能靠 JS 每次重算，要用更轻量的方式。
- 监听
scroll事件时，务必用requestAnimationFrame节流，否则 iOS Safari 会卡顿 - 不要直接改
style.bottom，改 CSS 自定义属性：document.documentElement.style.setProperty('--floating-bottom', '80px')，再用bottom: var(--floating-bottom) - 导航栏高度变化时（比如从 60px 缩到 44px），仅靠媒体查询不够，得靠 JS 实时读取
getBoundingClientRect() - 别忘了：Safari 对
z-index在transform容器内的处理有异常，能不用transform就不用
真正麻烦的从来不是写几行 CSS，而是你不知道哪个祖先元素偷偷加了 transform，或者哪段第三方脚本往 body 插了个带 filter 的遮罩层——它们会让 position: fixed 突然“认错爹”。
