fixed退化为relative效果是因祖先元素设置了transform、filter等属性，创建了新包含块，使fixed元素相对该父级定位；移动端键盘弹出时，ios视觉视口冻结导致fixed错位，需用sticky替代或js动态适配。
为什么fixed突然变成relative效果
不是你写错了position: fixed，而是某个祖先元素悄悄创建了新包含块——只要它有transform（哪怕transform: translateZ(0)）、filter（哪怕filter: blur(0)）、opacity小于1、backdrop-filter或will-change，fixed就退化为相对于该父级定位，视觉上就像“跟着滚动”。
用开发者工具快速确认：选中失效元素 → Shift+点击右上角箭头逐层上跳 → 每层切到Computed面板搜transform和filter，第一个非none的值就是元凶。
- 别信
* { filter: unset }——unset对filter无效，必须写filter: none - 第三方组件（如
scroll-view、弹窗、轮播图）内部常自带transform，你没写，但它写了 -
transform: scale(1)、rotate(0)、translateX(0)全部触发失效，不是“没动就没影响”
移动端键盘弹出时fixed卡在底部下面
iOS Safari里position: fixed锚定的是视觉视口（visual viewport），而软键盘弹出时这个视口基本冻结，window.innerHeight不变，getBoundingClientRect()返回旧坐标，输入框直接被顶穿。
此时查transform没用，得换思路：
- 优先用
position: sticky替代：父容器设min-height: 100vh，子元素设position: sticky; bottom: 0;，天然响应键盘推起 - 若必须用fixed，监听
focusin事件，加setTimeout(() => { /* 读取新bottom */ }, 0)再动态设bottom值 - blur后立刻清除内联
bottom并恢复position: fixed，否则滚动时会消失 - 安卓微信WebView里，
scrollTo(0, 0)常被节流，改用setTimeout(() => window.scrollTo(0, 0), 100)更稳
怎么把fixed元素捞回视口基准
临时加transform: none !important能验证问题，但不能当解法。真正修复要动结构：
- React用
createPortal、Vue用Teleport，把fixed元素挂到下，彻底脱离干扰DOM树 - uni-app H5端可结合
var(--window-top)等内置变量做安全区适配，比硬写top: 0更可靠 - 避免在
overflow: hidden或contain: layout父容器里放fixed元素——前者裁剪，后者可能阻断合成层 - 如果DOM结构无法调整（比如微前端主应用加了
transform，子应用要挂fixed按钮），只能协商层级或改用position: absolute+ JS动态计算top/left（注意节流）
sticky替代fixed时容易漏掉的条件
position: sticky不是万能兜底，它本身也有一堆隐性依赖：
- 父容器必须有明确高度（
height: 100vh或min-height: 100vh），不能只靠flex: 1或overflow: auto偷懒 - 父容器不能有
transform、overflow: hidden或will-change，否则sticky直接不触发 - 必须指定阈值，比如
top: 0或bottom: env(safe-area-inset-bottom)，光写position: sticky没用 - 元素自身不能设
display: inline或float，否则sticky失效
最麻烦的是嵌套很深又多框架共用DOM的场景——这时候transform在哪一层、谁加的、能不能动，往往比代码本身更难协调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
