为什么在父对象上应用CSS过滤器会破坏子对象的定位？

所以我有一个标题屏幕“动画”，它的标题集中在全屏页面上，当你向下滚动时，它会变小并保持在页面的顶部。下面是一个具有预期行为的工作示例，我从中剥离了所有不必要的代码，使其最小化：

$（窗口）。滚动（（）=>{
“严格使用”；
设windowH=$（window.height（）；
让windowS=$（window.scrollTop（）；
设页眉=$（“#页眉”）.height（）；
if（窗口<窗口H标题）{
$（“#title”）.css（“转换”、“缩放”（+（2-（windowS/（$（document.outerHeight（）-windowH））*2.7）+”）；
$（“#header”）.css（“transform”、“translateY（0）”）；
$（“#内，#内容”）.css({
“位置”：“静态”，
“页边距顶部”：0
});
}否则{
$（“#内”）.css({
“位置”：“固定”，
“页边距顶部”：-windowH+页眉
});
$（“#内容”）.css（“页边空白顶部”，windowH）；
}
$（“#页眉”）.css（“位置”，windowS>（windowH页眉）/2？“固定”：“静态”）；
});
。已修复{
位置：固定！重要；
}
.包装纸{
宽度：100%；
文本对齐：居中；
}
.包装工：以前{
显示：表格；
内容：“；
}
.包装工：之后{
明确：两者皆有；
}
#里面{
宽度：100%；
高度：100vh；
背景颜色：浅珊瑚；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#标题{
高度：90px；
排名：0；
位置：粘性；
显示器：flex；
对齐项目：居中；
证明内容：中心；
过渡：均为0.5s；
}
#头衔{
宽度：100%；
颜色：#fff；
变换：尺度（2）；
}
#内容{
高度：1000px；
背景颜色：浅蓝色；
}

标题
如果我们参考，我们可以阅读：

如果筛选器属性的值不是none，则会导致
为绝对定位和固定定位创建包含块
子体除非其应用的元素是文档根
当前浏览上下文中的元素。函数列表如下所示
按提供的顺序应用

这意味着您的
position:fixed
元素将相对于过滤的容器而不是视口进行定位。换句话说，它仍然是固定的，但在其新的包含块（过滤容器）内

以下是一个简化版本来说明这个问题：


.container{
显示：内联块；
宽度：200px；
高度：200vh；
边框：1px实心；
}
.container>div{
位置：固定；
宽度：100px；
高度：100px；
背景：红色；
颜色：#fff；
}

我被固定在卷轴上
我跟着卷轴走
为了避免每个浏览器的维护困难和不同实现，您可以使用递归树遍历功能，将位置标记为“固定”节点，然后在不破坏位置的情况下正确应用所需的过滤器

我使用代码全局应用“filter invert”属性，而不将其硬编码到特定的父元素。
如果要模糊或灰度化除一个元素之外的整个页面，只需使用
背景过滤器
而不是
过滤器
。
在编写Firefox的时候，默认情况下只需要修改它

不工作：



.覆盖{
位置：固定；
右：10%；
排名前10%；
底部：10%；
左：10%；
背景色：红色；
z指数：2；
}
.overlay~*{
滤镜：灰度（50%）模糊（5px）；
}
我没有模糊
谢谢！我仍然想知道为什么这是一件事。如果不是这样的话不是更好吗？@MiXT4PE它是在规范中定义的，所以应该是这样的，你可能会问他们为什么这样定义。。我很确定这一选择背后有一个原因（可能很复杂），如果我不能移动我的HTML，因为它需要在一个表单中，而这个表单正好位于过滤元素中，该怎么办？规范中有其他解决方案吗？@ygoe首先，它不是bug，它的设计就像我们不喜欢的许多功能一样，但我们应该使用（清除浮动、边距折叠等），因此您应该调整代码以克服此问题。没有通用的解决方案，但根据您的情况，肯定有解决方案。您可以通过添加特定代码来提问，以查看我们是否可以修改您的逻辑以保留您的需求并解决问题。您回答的进一步上下文：添加了当
过滤器
的值不是
无
时创建包含块的规范。GitHub问题还有一个链接，指向决定此问题的讨论，并且（）用于说明包含块的目的是为了修复的歧义。