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

闲言：自己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）变为基于其父元素或者祖先元素。好坑啊！！！
引用个例子来说明一下：

.transformEle { width: 400px; height: 400px; transform: translateY(200px); background: #00D287; } .fixedEle { position: fixed; bottom: 0; width: 50px; height: 50px; background: #FF3131; }

文章图片

文章图片
【CSS那些破B事儿系列之position:fixed定位失效】如果transformEle使用了transform，而fixedEle使用了position: fixed，那么position: fixed不会有固定在visual viewport上，实际结果相当于相对transformEle元素定位，就是fixed相对的不是visual viewport，而是transformELe, 产生这样的原因主要是因为transform和position: fixed使用了不同的坐标系统。