fixed定位失效，transform影响普通元素

项目场景：

项目场景：项目中fixed定位失效

---

问题描述

只要position:fixed；元素的父元素有transform样式，那么这个元素的fixed定位就会失效；无论是transform:translate()，scale()还是rotate()。

<div style='transform:translate3d(0,0,0)'>
    <div style='position:fixed;top:0;left:0;'></div>
</div>

上面代码中的position:fixed会失效。

---

原因分析：

我们应该都知道，position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是，真是一物降一物，position:fixed固定效果却被小小的transform给干掉了，直接降级变成position:absolute的蛋疼表现。

---

解决方案：

TIP：注意，这个特性表现，目前只在Chrome浏览器/FireFox浏览器下有，IE浏览器，包括IE11, fixed还是fixed的表现

所以不建议这样使用，换其他实现dom方式吧！

拓展

CSS3 transform对普通元素的N多渲染影响

• transform提升元素的垂直地位
• transform限制position:fixed的跟随效果
• transform改变overflow对absolute元素的限制
• transform限制absolute的100%宽度大小