filter非none会强制创建新包含块，导致fixed元素退化为相对父容器定位；原因在于浏览器仅检查filter计算值是否为none，而非视觉效果，如blur(0)、opacity(0.99)均触发；修复首选将filter设于html上，次选portal移至body并调整选择器与z-index。
filter非none会强制创建新包含块
不是样式写错了，而是CSS规范明确要求：只要任意祖先元素的filter计算值不为none（哪怕只是filter: blur(0)、filter: opacity(0.99)），浏览器就必须为其创建一个新的包含块（containing block）。此时position: fixed就不再锚定视口，而退化为相对于这个父容器定位——效果等同于position: absolute。
为什么blur(0)这种“没变化”的写法也触发
浏览器不判断视觉是否变化，只检查计算值。只要解析后filter不是none，就立即创建新包含块。常见踩坑点包括：
-
filter: grayscale(0%)→ 计算值是grayscale(0)，≠none -
filter: opacity(1)→ 实际计算值仍为opacity(1)，不是none - 第三方组件内部默认加了
filter: drop-shadow(0 0 0 #000)，你没写，但它写了
怎么快速确认是不是filter惹的祸
打开Chrome DevTools → Elements面板 → 选中你的fixed元素 → 切到「Computed」标签页 → 往上逐层点开祖先节点，重点检查：
-
filter是否为none -
transform是否为none（别漏掉translateZ(0)） -
backdrop-filter是否非none - 「Containing Block」字段是否显示为某个
div而非Viewport
修复时最容易忽略的细节
把filter挪到html上虽是最轻量解法，但有硬性前提：
-
html自身不能有transform、backdrop-filter或will-change，否则它自己就成了新包含块，移过去也没用 - 若用
createPortal或document.body.append提元素，必须改选择器——不能再依赖原DOM路径（如.modal .fixed-btn），得用独立类名（如.global-fixed-btn） - 提至
body后，z-index要显式设高（如z-index: 2147483647），否则可能被其他body子元素遮挡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
