fixed 定位失效 与 CSS 层叠上下文

第一部分，position: fixed失效的问题；
第二部分，了解一下由此扯出的一个Stacking Context层叠上下文。
文中大部分内容来自于我对W3C文档及一些英文资料的理解，如有不明确或表述不准确的地方还请指出。

fixed 定位与 CSS 层叠上下文的关系

关于 position: fixed

position: fixed 在日常布局中比较常用，如移动端头部和底部导航定位、模态框、悬浮按钮等，设置了这个属性值得元素会相对于屏幕视口（viewport）进行定位，其位置在屏幕进行滚动时会保持不变，不占用文档流中的位置，而且打印时这个元素会出现在 每一页 的相同位置。设置了 position: fixed 的元素最终的位置由它的 top, right, bottom, left 来决定，这个值会创建一个新的 stacking context（不知道这个词应该如何准确地翻译，姑且认为是层叠上下文吧）。
但是，有些情况下，这种定位方式会失效，使得元素相对于视窗定位的定位不符合预期（其实是 fixed 定位的参考元素变了）。当该元素的父元素中（广义，包含祖先元素）有元素的 transform 或 perspective 的值不是 none，该元素就会相对于这个父元素而不是视口进行定位。
具体的原因是这样：

Specifying a value other than none for the transform property establishes a new local coordinate system at the element that it is applied to. The mapping from where the element would have rendered into that local coordinate sys