position:fixed 绝对定位“失效”

如图所示，项目中有一个信息窗口，现在需要将其缩小，以展示地图全景，如下图所示（没UI就自己画了），这就是大概的效果吧。

首先想到的就是通过绝对定位fixed，在信息窗口缩小时，通过:class绑定样式，让小窗口滑出。

现象：fixed定位失效了！此时的fixed不再是为窗口（Viewport）而定位。

缩小信息窗口的时候，小窗口没有滑出，通过浏览器调试，将信息窗口调出，发现此时的小窗口是相对于信息窗口定位的。

why？

这时突然想起以前曾经听过的一句话，fixed并非100%相对于Viewport窗口定位，绝对定位也需要满足一定的条件。

翻阅了一下资料，发现了一句话

fixed 属性会创建新的层叠上下文。当元素祖先的 transform  属性非 none 时，容器由视口改为该祖先。

这就是fixed不将相对于视口定位的条件之一。

所以原因清楚了，就是在我缩小信息窗口的时候给他添加了一个translateX(180px)的transform。

小窗口和信息窗口来自同一组件，因此容器就变为其祖先：信息窗口。

 

总结：在带有transform且不为none的元素层级内，使用position:fixed会"失效"

 

当然，上述现象都是在谷歌浏览器Chrome版本 72.0.3626.109（正式版本） （64 位）上发现的，不确定其他浏览器内核是否存在此问题。

 

-------------------------------------------分割线---------------------------------------------.

拓展：看了伯乐在线的文章，发现还有如下两种情况也会导致fixed定位出现问题，这里先记录一下。

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