问题
在position:fixed的使用中，突然发现某个操作之后，fixed定位的位置变了？？
bottom:0,left:0。本来应该在最下面，结果跑没影了。
wtf？position:fixed不是根据视口定位的吗？
Stacking Context -- 堆叠上下文
哦，如果position:fixed的父元素加了transform：xxx之后position:fixed会根据父元素定位。
原因应该是transform：xxx形成了Stacking Context -- 堆叠上下文。
堆叠上下文（Stacking Context）：堆叠上下文是 HTML 元素的三维概念，这些 HTML 元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
堆叠上下文的创建，该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位，而是基于这个父元素。
So，如何触发一个元素形成 堆叠上下文 ？方法如下（参考自 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"的元素
so,都会影响position:fixed 定位吗？不是
会影响的只有：
- transform 属性值不为 none 的元素
- perspective 值不为 none 的元素
- 在 will-change 中指定了任意 CSS 属性
引发问题的原因？
呃，zepto的$(el).show();会给元素加transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);。
解决方案
就改成 $(el).css('display', 'block')。。