场景
最近在一个活动H5页面中，使用了translate3d技术来移动‘小车’，实现的效果在移动端测试还不错，小车按着规定的曲线，不急不慢的运动着，一切都是完美的。然而，问题来了，我后面加上的任务栏，明明是fixed相对屏幕定位，竟然在小车运动的时候，跟着背景图滚动，我的心也跟着了。。。
抱着万事找度娘的想法，我开始了网上冲浪之旅。终于，找了fixed定位失效的场景。
失效的 position:fixed
首先MDN 用一句话概括了这种情况：
当元素祖先的 transform 属性非 none 时，定位容器由视口改为该祖先。
通俗的讲就是指定了 position:fixed 的元素，如果其祖先元素存在非 none 的 transform 值 ，那么该元素将相对于设定了 transform 的祖先元素进行定位。
那么，为什么会发生这种情况呢？说好的相对视口（Viewport）定位呢？继续百度后，发现了堆叠上下文的概念（Stacking Context）
- 任何非 none 的 transform 值都会导致一个堆叠上下文（Stacking Context）和包含块（Containing Block）的创建。
- 由于堆叠上下文的创建，该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位，而是基于这个父元素。
Stacking Context – 堆叠上下文
堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。简单理解，就是生成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系。
按照上面的说法，堆叠上下文的创建，该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位，而是基于这个父元素。
那么问题来了，是否所有能够生成堆叠上下文的元素，都会使得其子元素的 position:fixed 相对它，而不是相对视口（Viewport）进行定位呢？
##创建堆叠上下文的方式
首先要找到所有能够使元素生成堆叠上下文的方法。如何触发一个元素形成 堆叠上下文 ？方法如下（参考自 MDN）
根元素 (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”的元素
小结
在最新的 Blink 内核下，发现并不是所有能够生成层叠上下文的元素都会使得 position:fixed 失效，但也不止 transform 会使 position:fixed 失效。
所以，MDN 关于 position:fixed 的补充描述不够完善。下述 3 种方式目前都会使得 position:fixed 定位的基准元素改变（本文重点）：
transform 属性值不为 none 的元素
perspective 值不为 none 的元素
在 will-change 中指定了任意 CSS 属性