闲言：自己css水平不够导致前段时间碰到position:fixed定位失效的问题，麻蛋，fixed定位不是一直都是相对于屏幕视口（viewport）的位置来指定fixed属性元素的位置么？哎，碰到这种问题只能说自己太菜了，于是各种翻资料，看看fixed到底基于什么定位，于是就有了下面这些拗心的解释！！！
首先看下MDN上是怎么说的：
fixed:
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
What?
好吧，我承认这部分MDN看的实在是少，工作最初就接触html、css，遵循着老路就走下来了，这里有两个我之前不知道的概念，层叠上下文与元素祖先的 transform 属性非 none，看到MDN的解释就是要fixed定位的元素如果其所在DOM结构的父元素或者祖先元素出现transform 属性非 none 时fixed相对的位置会由基于屏幕视口（viewport）变为基于其父元素或者祖先元素。好坑啊！！！
引用个例子来说明一下：
<style>
.transformEle {
width: 400px;
height: 400px;
transform: translateY(200px);
background: #00D287;
}
.fixedEle {
position: fixed;
bottom: 0;
width: 50px;
height: 50px;
background: #FF3131;
}
</style>
<div class=transformEle>
<div class=fixedEle>
</div>
</div>
如果transformEle使用了transform，而fixedEle使用了position: fixed，那么position: fixed不会有固定在visual viewport上，实际结果相当于相对transformEle元素定位，就是fixed相对的不是visual viewport，而是transformELe, 产生这样的原因主要是因为transform和position: fixed使用了不同的坐标系统。
-
层叠上下文
这个有时间再继续写一下。
