CSS那些破B事儿系列之position:fixed定位失效

闲言：自己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使用了不同的坐标系统。

层叠上下文 这个有时间再继续写一下。