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使用了不一样的坐标系统。

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