iOS Safari中fixed失效是因祖先元素触发新包含块，使fixed退化为relative或absolute；需用DevTools逐级检查transform/filter等属性，将元素挂载body下，并在键盘弹出时动态切换定位。
移动端 position: fixed “失效”不是你写错了，而是它被浏览器降级为 absolute 或 relative 了——iOS Safari 和多数安卓 WebView 会把它锚定在最近的可滚动祖先或新包含块上，而非视口。修复必须从干扰源、挂载位置、键盘响应三方面入手。
怎么快速定位是哪个父级在破坏 fixed 定位
别靠经验猜，用 DevTools 实锤排查：
- 选中失效的元素，在 Elements 面板按住 Shift 连续点击右上角箭头，逐级向上跳父节点
- 每跳一层，切到 Computed 标签页，搜索
transform、filter、will-change、backdrop-filter - 重点盯
transform: translateZ(0)—— 它不改变视觉，但已创建新包含块 - 顺手检查
opacity是否小于1（某些 UI 库默认设opacity: .99，也会触发退化）
为什么把元素挂到 body 下是最稳的解法
绕过所有中间容器的干扰样式，让 fixed 元素真正锚定视口：
- Vue 3 中直接用
<teleport to="body"></teleport>，无需改逻辑，DOM 层面移出父级上下文 - React 可用
createPortal挂到document.body；H5 端也可手动document.body.appendChild(el) - uni-app H5 必须这么做——
scroll-view内部的fixed元素无论加多少!important都无效，这是 iOS WebKit 的硬限制 - 挂载后记得加
z-index，并确保body没有overflow: hidden（否则可能阻断软键盘弹出）
软键盘弹起时 fixed 按钮飘走，该怎么动态应对
resize 事件不可靠，iOS 上触发率极低，必须用 focusin/blur 配合 JS 动态切换：
立即学习“前端免费学习笔记（深入）”；
- 监听
input、textarea、[contenteditable]的focusin事件，确认document.activeElement是目标元素再执行 - 键盘弹起后，
window.innerHeight在 Android 会压缩、iOS 则冻结 layout viewport，此时应切换为position: absolute+bottom: env(keyboard-inset-bottom, 0px) -
env(keyboard-inset-bottom)仅 iOS 16.4+ 支持，且需<meta name="viewport" content="viewport-fit=cover">启用，必须写 fallback：bottom: env(keyboard-inset-bottom, 0px)，不能只写env(...) -
blur后必须立刻恢复原始定位，并用setTimeout(() => { window.scrollTo(0, scrollTop) }, 0)补偿 iOS 滚动锚点偏移
用 flex 替代 fixed 做底部栏时容易漏掉什么
flex 不依赖视口锚点，但结构约束极强，漏一项就塌：
- 根容器（如
body或外层div）必须设height: 100vh，不能只写height: 100%（后者在键盘弹出时会塌） - 内容区必须设
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），否则无法撑满剩余空间 - 底部区域要加
flex-shrink: 0，否则长文本或横屏缩放时会被压缩变形 - iOS Safari 中若
body设了overflow: hidden，可能阻止键盘自动上推页面，慎用
真正难的不是选哪种方案，而是意识到：fixed 在移动端从来就不是“固定在屏幕某处”，而是“固定在某个不断被挤压、旋转、重映射的坐标系里”。键盘、缩放、横屏、辅助功能……每一个都是独立变量。任何只靠 CSS 声明就想一劳永逸的做法，都会在真机上露出马脚。
