fixed元素被filter劫持是因祖先filter非none强制创建新包含块，致其降级为relative定位；Chrome中用Computed面板逐层查filter/transform等值并观察Containing Block字段即可定位，修复首选将filter设于html上。
fixed元素的包含块被filter劫持了
不是样式写错了，而是只要任意祖先节点的filter计算值不为none，浏览器就必须创建一个新的包含块（containing block），导致position: fixed自动降级为相对于该祖先定位——效果等同于position: absolute。哪怕filter: blur(0)、filter: opacity(0.99)这种视觉上“没变化”的写法，也100%触发。
Chrome DevTools里怎么快速定位问题源头
打开Elements面板 → 选中失效的fixed元素 → 切到Computed标签页 → 点击右上角连续箭头逐层向上跳转父节点，每层都搜以下属性：
-
filter是否为none -
transform是否为none（别漏掉translateZ(0)、scale(1)） -
backdrop-filter是否非none -
opacity是否小于1 - 看“Containing Block”字段：如果显示的是某个
div而非Viewport，就锁定了罪魁祸首
修复时优先改CSS，而不是动JS
规范明确指出：filter作用在html根元素上，不会为后代的fixed或absolute创建新包含块。这是最轻量、副作用最小的解法：
- 错：
body { filter: grayscale(1); }→ 污染所有后代fixed元素 - 对：
html { filter: grayscale(1); }→ 视觉效果不变，fixed仍锚定视口 - 注意：
html本身若已设transform或backdrop-filter，那它自己就成了新包含块，此时移filter也无效
实在不能改父级样式？那就提DOM结构
当父容器由第三方库控制（比如弹窗加了backdrop-filter），或微前端中主应用强加了transform，CSS层面无法修改时，必须从DOM结构入手：
立即学习“前端免费学习笔记（深入）”；
- React：用
createPortal渲染到document.body - Vue：在
mounted中调用document.body.append(this.$el) - 纯HTML：手动把
<div class="fixed-btn">移到<code>底部 - 关键提醒：
z-index要显式设高（如z-index: 2147483647），选择器不能依赖原DOM路径（比如别用.modal .fixed-btn，改用.global-fixed-btn）
真正难处理的是多层嵌套+多框架共用DOM的场景，这时候定位基准已经不是“有没有
filter”的问题，而是“谁有权决定包含块”的权限问题。
