position: fixed 在移动端失效是因浏览器未重排视觉视口，应改用 position: absolute + focusin/blur 动态 bottom 计算，并满足根容器 relative+min-height:100vh、元素 width:100%、监听 focusin/blur 三条件。
直接用 position: fixed 在移动端（尤其 iOS Safari 和微信 WebView）大概率失效，这不是写法错误，而是浏览器对视口动态变化的响应机制缺陷——软键盘弹出、地址栏收放、横竖屏切换时，fixed 元素锚定的「视觉视口」不重排，位置就卡死或飘走。真机上测过就知道，靠改 z-index 或加 transform: translateZ(0) 反而会让问题更糟。
为什么 position: fixed 在 iOS 和微信里会退化成 absolute
只要任意祖先元素（哪怕隔了多层）设置了以下任一属性，fixed 就会失去相对于视口的定位能力：
-
transform值不为none（包括translateZ(0)、scale(1)） -
filter值不为none（哪怕blur(0)或opacity(1)写法有空格也会触发） -
will-change设在父级而非目标元素自身
这时它会退化为相对于该祖先定位，滚动时就跟页面一起动。DevTools 的 Layers 面板里如果看不到该元素出现在 “Composited Layers”，基本就是被拖进某个包含块里了。
用 position: absolute + JS 动态 bottom 替代的硬性条件
只改 position: absolute 会穿帮，必须同时满足三件事：
立即学习“前端免费学习笔记（深入）”；
- 根容器（如
<body>或<div id="app">）设position: relative且min-height: 100vh（不能只写height: 100%，否则键盘弹出时塌陷） - 悬浮球元素加
width: 100%，否则横屏或缩放后偏移 - 监听
focusin和blur，不是focus/resize：resize在 iOS 上触发率低于 20%，focusin才是唯一稳定入口点
示例关键逻辑：
input.addEventListener('focusin', () => {
setTimeout(() => {
const rect = document.activeElement.getBoundingClientRect();
const bottom = window.innerHeight - rect.bottom;
floatingBtn.style.bottom = `${bottom}px`;
}, 0);
});
input.addEventListener('blur', () => {
floatingBtn.style.removeProperty('bottom');
floatingBtn.style.position = 'fixed';
});如何安全适配软键盘和安全区
env(keyboard-inset-bottom) 是 iOS Safari 16.4+ 原生支持的最优解，但安卓完全不识别，旧版 Safari 也忽略，必须降级：
- 必须写 fallback：
bottom: env(keyboard-inset-bottom, 0px)，不能只写env(keyboard-inset-bottom) - 搭配
@supports (bottom: env(keyboard-inset-bottom))包裹，否则整条规则被跳过 -
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须存在，否则env(safe-area-inset-bottom)不生效
安卓端仍需靠 JS 监听 focusin 计算真实可视高度，因为 window.innerHeight 在键盘弹出后常延迟更新甚至不变，得用 visualViewport?.height（如有）或兜底为 screen.height * window.devicePixelRatio 估算。
真正难的不是写几行 CSS，而是让 JS 状态和 DOM 定位严格同步：blur 后没立刻恢复 position: fixed，滚动时元素就消失；setTimeout 延迟不够，getBoundingClientRect() 拿到的就是键盘弹出前的坐标；父容器用了 transform 却没意识到它悄悄创建了新包含块——这些细节漏掉一个，真机上就飘。
