【CSS】position:fixed 定位失效（变成absolute特性）

先抛出结论

当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。

可以尝试添加 transform: unset; 解决该问题。

下述 3 种方式目前都会使得 position:fixed 定位的基准元素改变：

1. transform 属性值不为 none 的元素
2. perspective 值不为 none 的元素
3. 在 will-change 中指定了任意 CSS 属性

失效的 position:fixed

大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。它的作用是：

position:fixed 的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。

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

MDN 用一句话概括了这种情况：

当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。

What！还有这种操作？可能有部分同学还没 get 到上面这句话的意思，通俗的讲就是指定了 position:fixed 的元素，如果其祖先元素存在非 none 的 transform 值 ，那么该元素将相对于设定了 transform 的祖先元素进行定位。

那么，为什么会发生这种情况呢？说好的相对视口（Viewport）定位呢？

这个问题，就牵涉到了 Stacking Context ，也就是堆叠上下文的概念了。解释上面的问题分为两步：

1. 任何非 none 的 transform 值都会导致一个堆叠上下文（Stacking Context）和包含块（Containing Block）的创建。
2. 由于堆叠上下文的创建，该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位，而是基于这个父元素。

Stacking Context -- 堆叠上下文

堆叠上下文（Stacking Context）：堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

概念比较抽象，简单理解，记住 生成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系。

关于 生成了 Stacking Context 的元素会影响该元素的层叠关系 这一点，具体可以看看这篇文章 层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？

而本文提到了生成了 Stacking Context 的元素会影响该元素定位关系 。按照上面的说法，堆叠上下文的创建，该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位，而是基于这个父元素。

不受控制的 position:fixed (https://www.cnblogs.com/coco1s/p/7358830.html)