(转自) wenku.baidu.com/view/73607b…
不受控制的position：fixed（转载）
本⽂为纯理论⽂章，没有 Demo，没有配图，可能会略微枯燥。
⼤家都知道，position:fixed在⽇常的页⾯布局中⾮常常⽤，在许多布局中起到了关键的作⽤。它的作⽤是：
position:fixed的元素将相对于屏幕视⼝（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。
但是，在许多特定的场合，指定了 position:fixed的元素却⽆法相对于屏幕视⼝进⾏定位。这是为何呢？
失效的 position:fixed
通俗的讲就是指定了 position:fixed的元素，如果其祖先元素存在⾮ none 的transform 值 ，那么该元素将相对于设定了 transform的祖先元素进⾏定位。
那么，为什么会发⽣这种情况呢？说好的相对视⼝（Viewport）定位呢？
这个问题，就牵涉到了 Stacking Context ，也就是堆叠上下⽂的概念了。解释上⾯的问题分为两步：
任何⾮ none 的 transform 值都会导致⼀个堆叠上下⽂（Stacking Context）和包含块（Containing Block）的创建。
由于堆叠上下⽂的创建，该元素会影响其⼦元素的固定定位。设置了 position:fixed
的⼦元素将不会基于 viewport 定位，⽽是基于这个⽗元素。
Stacking Context -- 堆叠上下⽂
好的嘛，好的嘛，⼜冒出新的名词了，堆叠上下⽂（⼜译作层叠上下⽂），⼜是什么？
堆叠上下⽂（Sta c k ing Co ntext）：堆叠上下⽂是 H TML 元素的三维概念，这些 H TML 元素在⼀条假想的相对于⾯向（电脑屏幕的）视窗或者⽹页的⽤户的 z 轴上延伸，H TML
元素依据其⾃⾝属性按照优先级顺序占⽤层叠上下⽂的空间。
概念⽐较抽象，简单理解，记住 ⽣成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系。
position:fixed 失效的最终原因
所以，MDN 关于 position:fixed的补充描述不够完善。position:fixed不仅仅只是在元素祖先的 transform 属性⾮ none 时失效，⽽是：所有能够⽣成堆叠上下⽂的元素，都会使得其⼦元素的 position:fixed相对它，⽽不是相对视⼝（Viewport）进⾏定位。（本⽂重点）
创建堆叠上下⽂的⽅式
上⾯都这么说了，想必让⼀个元素形成 堆叠上下⽂
的⽅式有很多种 。So，如何触发⼀个元素形成 堆叠上下⽂？⽅法如下：
（1）根元素 (HTML),
（2）z-index 值不为 "auto"的 绝对/相对定位，
（3）⼀个 z-index 值不为 "auto"的 flex 项⽬ (flex item)，即：⽗元素 display: flex|inline-flex，
（4）opacity 属性值⼩于 1 的元素（参考 the specification for opacity），
（5）transform 属性值不为 "none"的元素，
（6）mix-blend-mode 属性值不为 "normal"的元素，
（7）filter值不为“none”的元素，
（8）perspective值不为“none”的元素，
（9）isolation 属性被设置为 "isolate"的元素，
（10）position: fixed
（11）在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（12）-webkit-overflow-scrolling 属性被设置 "touch"的元素
换⾔之，所有设置了上⾯属性样式的元素，都有使其⼦元素的 position: fixed
失效的能⼒。
