父的CSS过滤器破坏了子的位置

父的CSS过滤器破坏了子的位置

如果我们参考规范我们可以阅读：

过滤器属性的非空值将导致 为绝对定位和固定定位的 后代 创建一个 包含块，
除非其所应用的元素是当前浏览上下文中的文档根元素。功能列表按提供的顺序应用。

这意味着您的

position:fixed

元素将相对于过滤后的容器而不是视口放置。换句话说，它仍然是固定的，但是在其 新的 包含块（过滤容器）中

这是一个简化的版本来说明此问题：

.container {  display: inline-block;  width: 200px;  height: 200vh;  border: 1px solid;}.container>div {  position: fixed;  width: 100px;  height: 100px;  background: red;  color: #fff;}<div >  <div>I am fixed on scroll</div></div><div  >  <div>I move with the scroll</div></div>

要解决此问题，请尝试将过滤器移至固定元素而不是其容器：

.container {  display: inline-block;  width: 200px;  height: 200vh;  border: 1px solid;}.container>div {  position: fixed;  width: 100px;  height: 100px;  background: red;  color: #fff;  filter: grayscale(1);}<div >  <div>I am fixed on scroll</div></div>

---

这是属性的非详尽列表1，该列表 导致为绝对和固定位置的后代创建一个包含块

• filter

• transform

• backdrop-filter

• perspective

• contain

• transform-style

• will-change

  当与上述值之一一起使用时

如果某个属性的任何非初始值都会导致该元素为绝对定位的元素生成一个包含块，则在will-
change中指定该属性必须使该元素为绝对定位的元素生成一个包含块。

1：将尝试使此列表保持最新。