position: fixed失效

在css中， 我们通过position: fixed进行相对于视口（viewport）的定位，且元素的位置在屏幕滚动时不会改变。

但是在许多特定的场合下，即使为元素指定了 position:fixed，仍然无法相对于屏幕视口进行定位。

MDN中，对于position: fixed有这样一段话：

当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

我们该怎样理解这段话呢？

1. 任何非 none 的 transform 值都会导致一个堆叠上下文（Stacking Context）和包含块（Containing Block）的创建。

2. 由于堆叠上下文的创建，该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位，而是基于这个祖先元素。（但是，并不是所有能够生成层叠上下文的元素都会使得 position:fixed 失效）

除了灰色框中的属性，当 父元素的will-change指定了任意CSS属性 时，也会使position: fixed相对于该祖先元素进行定位，而不是视口。

 

参考：https://www.cnblogs.com/coco1s/p/7358830.html