position:fixed not work？

问题

在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),

1. z-index 值不为 "auto"的 绝对/相对定位，
2. 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
3. opacity 属性值小于 1 的元素（参考 the specification for opacity），
4. transform 属性值不为 "none"的元素，
5. mix-blend-mode 属性值不为 "normal"的元素，
6. filter值不为“none”的元素，
7. perspective值不为“none”的元素，
8. isolation 属性被设置为 "isolate"的元素，
9. position: fixed
10. 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
11. -webkit-overflow-scrolling 属性被设置 "touch"的元素

so,都会影响position:fixed 定位吗？不是
会影响的只有：

1. transform 属性值不为 none 的元素
2. perspective 值不为 none 的元素
3. 在 will-change 中指定了任意 CSS 属性

引发问题的原因？

呃，zepto的$(el).show();会给元素加transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);。

解决方案

就改成 $(el).css('display', 'block')。。