position: fixed 是唯一能真正固定在视口的方案，因其始终绑定视口坐标系，而 absolute 受限于最近已定位祖先，易受 transform/filter 等影响失效。
必须用 position: fixed，其他方式在滚动时会失效——这是唯一能真正“固定在视口”的方案。
为什么 position: absolute 不行
很多人写完 position: absolute + right: 20px 就以为搞定，一滚动发现悬浮窗跟着内容跑。这是因为 absolute 是相对于「最近的已定位祖先」（比如 position: relative 的父容器）定位的，不是视口。如果页面里有带 overflow: auto 的模块、或某个 wrapper 加了 transform: translateZ(0)，它就可能锚定到那个局部容器上，位置完全失控。
而 fixed 始终绑定视口坐标系，滚动、缩放、软键盘弹出（iOS 除外）都不影响——这不是“更推荐”，是事实上的唯一可行路径。
- 检查开发者工具的 “Computed” 面板，确认
position确实是fixed，且没被祖先的transform/filter/will-change暗中覆盖 - 若结构无法修改，可临时加
transform: none !important到可疑父级，快速验证是否为干扰源
top: 50% + transform: translateY(-50%) 垂直居中失效的真相
写法本身没错，但只要任意父级（哪怕只是 外层的 wrapper）存在 transform、perspective 或 filter，fixed 元素就会改相对该父级定位，不再是视口。此时 top: 50% 计算的是父容器高度的 50%，不是视口高度。
- 最稳解法：把悬浮容器直接挂到
下，避开所有可能带transform的嵌套 - 若无法控制 DOM 结构，改用
top: calc(50vh - 65px)（假设元素高 130px），绕过百分比依赖 - 别信“设个
position: relative父容器就能修好”——那只是把问题从视口转移到父容器，反而更难调试
移动端和 iOS Safari 的兼容性陷阱
iOS Safari 对 fixed 在 overflow-scroll 区域内的支持不稳定。如果主内容区用了 overflow: hidden 或 -webkit-overflow-scrolling: touch，悬浮窗可能卡住不动、点击穿透，甚至渲染错位。
- 禁用
body { overflow-x: hidden }——这是最常见却最隐蔽的冲突源 - 小屏下优先用
bottom: 80px替代bottom: 20px，留出手指操作安全区 - 加
touch-action: manipulation和user-select: none，防止长按误触发拖拽或选中文本
z-index 和 DOM 结构怎么配才不被遮住
z-index 只对定位元素生效，且只在同一个 stacking context 内比较。如果悬浮窗的父容器（比如 <header></header>）本身有 z-index: 10，而你设了 z-index: 9999，它照样会被盖住——因为它们不在同一层级。
- 悬浮容器必须是独立
<div>，别塞进 <code><main></main>或带transform的布局组件里 - 设
z-index: 1000足够，别盲目堆到999999——太高会压住全屏视频控件、浏览器 DevTools、甚至系统级弹窗 - 第三方客服 SDK（如美洽）务必等
DOMContentLoaded后再加载，否则可能插入到错误 stacking context 中
真正麻烦的从来不是写几行 CSS，而是判断哪个父级悄悄改了定位基准，或者哪段 legacy JS 给 body 加了个隐形 transform。遇到偏移，先看 Computed 面板里的 containing block，再查 DOM 树里离得最近的那个带 transform 的祖先——90% 的问题都卡在这一步。
