fixed元素因祖先filter非none而退化为相对定位，本质是filter创建了新包含块；修复首选将filter设在html上，次选用portal等方案将元素移至body。
fixed元素被父级filter偏移，本质是包含块变了
不是样式写错了，而是父级（或任意祖先）只要设置了filter且计算值不为none，浏览器就会创建新的包含块（containing block），导致position: fixed退化为相对于该父容器定位——效果等同于position: absolute。哪怕filter: blur(0)、filter: opacity(0.99)这种“视觉无变化”的写法，也完全触发。
快速确认是不是filter惹的祸
打开 Chrome DevTools → Elements 面板 → 选中你的fixed元素 → 切到「Computed」标签页，往上逐层点开祖先节点，重点检查：
– filter是否为none
– transform是否为none（别漏掉translateZ(0)、scale(1)）
– will-change是否声明了transform或filter
– backdrop-filter是否非none
如果某一层的Containing Block显示为某个div而非Viewport，基本就锁定了问题源头。
修复方案：优先把filter挪到html上
规范明确指出：filter作用在根元素html时，**不会**为后代的fixed或absolute创建新包含块。这是最轻量、副作用最小的解法：
- 错：
body { filter: grayscale(1); }→ 污染所有后代fixed元素 - 对：
html { filter: grayscale(1); }→ 视觉效果不变，fixed仍锚定视口
注意：html本身若已设了transform或backdrop-filter，那它自己就成了新包含块，此时移filter也无效。
实在不能动父级？那就把fixed元素“提”出来
当父容器由第三方库控制（比如弹窗加了backdrop-filter），或微前端中主应用强加了transform，CSS层面无法修改时，必须从DOM结构入手：
- React：用
createPortal渲染到document.body - Vue：在
mounted或onMounted中调用document.body.append(this.$el) - 纯HTML：手动把
<div class="fixed-btn">移到<code>底部关键提醒：
– 样式选择器不能依赖原DOM路径（比如别用.modal .fixed-btn，改用.global-fixed-btn）
– 显式设置高z-index（如z-index: 2147483647），避免被其他body子元素遮挡
– 如果组件绑定了ref或事件监听，移出后需在卸载阶段手动清理真正难处理的是多层嵌套+多框架共用DOM的场景，这时候定位基准已经不是“有没有filter”的问题，而是“谁有权决定包含块”的权限问题。
