positin:fixed失效了？

 > 在日常前端开发中，position:fixed，相信大家都会用到，用来将元素相对于屏幕视窗（viewport）来定位，意味着即便页面滚动，它还是会停留在原来指定的位置，这个属性在日常的页面布局经常用到。但是，在许多特定的场合，指定了 position:fixed 的元素却无法相对于屏幕视口进行定位。

之前做的一个项目写了一个弹窗的组件，根据需求我就是用position:fixed来定位做的，而且上线很久都没有问题，有一天在使用的时候发现，这个组件并没有出现在该出现的位置，第一反应去查看代码记录，并没有人动过这个组件，怎么就突然出bug了呢，position:fixed依然笔挺挺的呆在那里，没问题啊，然后就一直在找问题，找了好久，最后发现一个同学在做性能优化的时候给position:fixed的这个组件的父元素加了一个样式属性transform: translateZ(0)，我们知道加这个属性之后是可以利用GPU启动硬件加速的，提高了性能，同时正是因为加了这个属性导致position:fixed固定屏幕视图失效了，

今天刚好遇到了这样的一个问题，咔嗒社区项目用到了公共组件池里的一个富文本编辑器，同时要求编辑器的工具栏悬浮编辑器顶部，在了解到公共组件池里的这个组件是支持工具栏悬浮的，于是翻开代码找到了如何配置，配置之后确实是起作用了，但是并不是预期的显示效果，并且在滚动的时候出现”时而不灵“的现象，于是继续翻源码，最后还是找到了问题的原因，这个富文本公共组件并不支持我们目前的交互需求，它工具栏悬浮的时候也是相对于视窗，并且top值设为0，修复这个问题在这时候并是最好的办法，因为时间来不及了，于是我想到了”position:fixed失效的“的办法，抛弃了这个公共组件对工具栏悬浮的支持，自己通过css样式控制，让编辑器的工具栏相对于父元素”悬浮“，只是在工具栏的父元素里加了这个属性:

       transform: translateZ(0)

到这时候，问题解决，及时上线

问题能够及时解决也是因为之前有曾类似的经历，当时为了查看究竟，也是翻开了mdn，其实mdn上是有说明的，只是我以前没有注意到，mdn上是这样为position设为fixed描述的：

The element is removed from the normal document flow; no space is created for the element in the page layout. It is placed relative to the initial containing block established by the screen's viewport, unless any ancestor has transform, perspective, or filter property set to something other than none (see CSS Transforms Spec), which then causes that ancestor to take the place of the elements containing block. Note, there are browser inconsistencies with perspective and filter contibuting to containing block formation. Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

总结一下也就是：在指定了 position:fixed 的元素，如果其祖先元素存在非 none 的 transform 值 ，那么该元素将相对于设定了 transform 的祖先元素进行定位。

当然上面说的情况只是在chrome下做了测试通过，Mac下的Safari和IE浏览器在上面的设置之后都没有对position:fixed产生影响。

随手写下这篇文章，希望对之前没有详细了解过position:fixed的人有帮助，说不定什么时候就能派上用场了