transform 想必大家都很熟悉，可以通过其转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等属性来对元素进行变换，不过这篇文章想探讨的不是这些内容，而是 transform 对元素布局、页面渲染方面的影响。例如，你知道它会影响 fixed 元素的位置吗？你有想过它会改变元素的层叠顺序吗？
在我们近期的一个项目中，碰到过这个问题，fixed元素居然好端端的失效了 ，后来不断的排查，最终发现了问题出在 CSS3 transform上的，只因为fixed元素的父层添加了 CSS3 transform属性。
我们应该都知道，position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是，真是一物降一物，position:fixed固定效果却被小小的transform给干掉了，直接降级变成position:absolute的蛋疼表现。
关键就在于这个 fixed 元素被拥有 transform 的属性的父 div 包裹着，所以它会相对于这个 transform 的父元素定位，而不是我们以为的根元素定位。
至于为什么会这样，就需要从 W3C 规范中去寻找原因了。我找到了这样一段解释，也就是说 transform 值不为 none 的元素会创建一个 containing block（作者注：容器块，盒元素定位和大小一般参考容器块进行计算），然后该元素的 fixed 子元素会相对该元素进行定位。
原因搞明白了，那么为什么 W3C 委员会会这样设计呢？我们可以从两个方面来思考：
假如我们想让 fixed 元素相对根元素进行绝对定位，我们往往会把它作为根元素的第一级子元素，从而也就不会存在它被 transform 父元素包裹的情况了。
那么什么情况下我们会把 fixed 元素放在 transform 父元素下呢？在我看来，只有我们希望它跟随父元素一起 transform 时才会这样做，要不然为什么不把它放在根元素下呢？
