本文为纯理论文章，没有 Demo，没有配图，可能会略微枯燥。
大家都知道，position:fixed 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。它的作用是：
position:fixed 的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。
但是，在许多特定的场合，指定了 position:fixed 的元素却无法相对于屏幕视口进行定位。这是为何呢？
失效的 position:fixed
在许多情况下，position:fixed 将会失效。MDN 用一句话概括了这种情况：
> 当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。
What！还有这种操作？可能有部分同学还没 get 到上面这句话的意思，通俗的讲就是指定了 position:fixed 的元素，如果其祖先元素存在非 none 的 transform 值 ，那么该元素将相对于设定了 transform 的祖先元素进行定位。
那么，为什么会发生这种情况呢？说好的相对视口（Viewport）定位呢？
这个问题，就牵涉到了 Stacking Context ，也就是堆叠上下文的概念了。解释上面的问题分为两步：
任何非 none 的 transform 值都会导致一个堆叠上下文（Stacking Context）和包含块（Containing Block）的创建。
由于堆叠上下文的创建，该元素会影响其子元素的固定定位。设置了
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 失效的最终原因
所以，MDN 关于 position:fixed 的补充描述不够完善。position:fixed 不仅仅只是在元素祖先的 transform 属性非 none 时失效，而是：
所有能够生成堆叠上下文的元素，都会使得其子元素的 position:fixed 相对它，而不是相对视口（Viewport）进行定位。（本文重点）
创建堆叠上下文的方式
上面都这么说了，想必让一个元素形成 堆叠上下文 的方式有很多种 。
So，如何触发一个元素形成 堆叠上下文 ？方法如下：
- 根元素 (HTML),
- z-index 值不为 "auto"的 绝对/相对定位，
- 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
- opacity 属性值小于 1 的元素（参考 the specification for opacity），
- transform 属性值不为 "none"的元素，
- mix-blend-mode 属性值不为 "normal"的元素，
- filter值不为“none”的元素，
- perspective值不为“none”的元素，
- isolation 属性被设置为 "isolate"的元素，
- position: fixed
- 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
- -webkit-overflow-scrolling 属性被设置 "touch"的元素
换言之，所有设置了上面属性样式的元素，都有使其子元素的 position: fixed 失效的能力。
position:fixed 的其他问题
当然，position: fixed 在移动端实现头部、底部模块定位。或者是在 position: fixed 中使用了 input 也会存在一些问题，这个有很多文章都描述过并且存在很多解决方案，本文不讨论这块问题。
这方面的问题，可以看看这篇文章：移动端web页面使用position:fixed问题总结
最后
系列 CSS 文章汇总在我的 Github ，持续更新，欢迎点个 star 订阅收藏。
好了，本文到此结束，希望对你有帮助 :)
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。