position: fixed 是唯一真正锚定视口的定位方式，因 absolute 依赖已定位祖先（如含 transform/relative 的容器）而随滚动偏移；ios 中框架自动注入的 transform: translatez(0) 等属性更易导致 absolute 失效。
必须用 position: fixed，其他方案在滚动时都会失效——这是唯一能真正“固定在视口”的方式。
为什么 position: absolute 会跟着滚动？
因为 absolute 是相对于最近的已定位祖先（position: relative / absolute / fixed）计算位置的。一旦祖先容器有 transform、overflow: hidden 或 position: relative，悬浮球就会被“框死”在里面，一滚动就消失或错位。iOS 上尤其常见：某些 UI 框架的 wrapper 自动加了 transform: translateZ(0)，直接让 absolute 失效。
而 fixed 直接锚定视口，不依赖任何父级，滚动、缩放、横屏都稳。
- 别把悬浮球塞进某个
div再设absolute—— 这是高频翻车点 - 检查浏览器开发者工具的 computed 样式，确认
position确实是fixed，且top/right/bottom/left值被正确解析 - 如果用了 CSS-in-JS 或 Shadow DOM，注意样式作用域是否意外隔离了
fixed行为
fixed 元素抖动或跳动的三个真实原因
抖动不是动画问题，而是布局重排或坐标失准：
-
top或left被 JS 动态修改（比如监听scroll改style.top）→ 触发强制同步重排，尤其 iOS WebKit 卡顿明显 - 父容器有
transform（哪怕只是transform: translateZ(0)）→ 部分浏览器会错误地将fixed元素重新绑定到该容器，导致“伪固定” - 使用了
inset（如inset: 20px auto auto 20px）但浏览器不支持（Safari 15.4 以下不支持）→ 回退成未定义行为，位置漂移
最稳写法始终是：position: fixed; bottom: 24px; right: 24px;，不依赖 JS 计算，不碰 top/left。
移动端 Safari 的 fixed 隐藏陷阱
iOS Safari 对 fixed 的实现更敏感，容易因以下情况“突然消失”：
- 页面有
height: 100vh+overflow-y: scroll的 wrapper → 视口高度被截断，fixed元素可能被裁掉 - 启用了
viewport的user-scalable=yes，用户双指缩放后，fixed元素位置不再对齐原始像素坐标 - 元素上没加
touch-action: none→ 拖拽时触发页面缩放手势，间接影响fixed定位稳定性
真机测试时务必打开 Safari 的「显示渲染边界」（Web Inspector → Rendering → Paint Flashing），观察 fixed 元素是否被意外裁剪或层叠上下文覆盖。
如何安全地动态调整 fixed 位置？
只有两种场景值得用 JS 动态调位置：避开底部 TabBar（iOS PWA）、适配横屏键盘弹出。此时必须避开 scroll，只响应：
-
resize事件（窗口大小变化） -
orientationchange（横竖屏切换） -
focusin+focusout（针对输入框唤起键盘）
示例逻辑（避开 iOS 键盘）：
let safeBottom = 24;
window.addEventListener('focusin', e => {
if (e.target.matches('input, textarea')) {
safeBottom = 120; // 键盘高度估算
ball.style.bottom = safeBottom + 'px';
}
});
window.addEventListener('focusout', () => {
safeBottom = 24;
ball.style.bottom = safeBottom + 'px';
});
重点：所有动态调整必须用 requestAnimationFrame 包裹，否则在快速横竖屏切换时仍会抖动。
最常被忽略的是：即使写了 position: fixed，只要父元素触发了新的层叠上下文（比如 opacity: 0.99、will-change: transform、甚至 filter: blur(1px)），z-index 就只在那个局部上下文中生效——按钮可能明明设了 z-index: 9999，却还是被遮住。查 computed 样式里的 stacking context 项，比盲目调高 z-index 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
