transform 想必大家都很熟悉，可以通过其转换（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等属性来对元素进行变换，不过这篇文章想探讨的不是这些内容，而是 transform 对元素布局、页面渲染方面的影响。例如，你知道它会影响 fixed 元素的位置吗？你有想过它会改变元素的层叠顺序吗？
tranform 改变 fixed 子元素的定位对象
例子探究
首先我们来看一个例子（）：下面示例中的 fixed 元素设置的是 top: -50px，按理说我们应该是看不见它的，因为它会相对根元素定位到页面上方的外部。然而事实狠狠打了我们的脸，它是可见的！这是为什么呢？
关键就在于这个 fixed 元素被拥有 transform 的属性的父 div 包裹着，所以它会相对于这个 transform 的父元素定位，而不是我们以为的根元素定位，又由于父元素有 margin-top: 50px 的值，所以两者相抵消（-50px + 50px = 0)，最终导致该元素位于页面起始处。
至于为什么会这样，就需要从 W3C 规范中去寻找原因了。在 中，我找到了这样一段解释：For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants，也就是说 transform 值不为 none 的元素会创建一个 containing block（作者注：容器块，盒元素定位和大小一般参考容器块进行计算），然后该元素的 fixed 子元素会相对该元素进行定位。
一点思考
原因搞明白了，那么为什么 W3C 委员会会这样设计呢？依我愚见，可以从两个方面来思考：
- 假如我们想让
fixed 元素相对根元素进行绝对定位，我们往往会把它作为根元素的第一级子元素，从而也就不会存在它被transform 父元素包裹的情况了。 - 那么什么情况下我们会把
fixed 元素放在transform 父元素下呢？在我看来，只有我们希望它跟随父元素一起变形时才会这样做，要不然为什么不把它放在根元素下呢？
transform 改变元素层叠顺序
例子探究
同样的，我们先来看一个例子（）：下面示例中第一行为啥都没加的情况下，让第二个元素（蓝色块）通过 margin-left: -40px 向左偏移了 40px，按照后来居上的层叠规则，它会盖住第一个元素（黄色块）的一部分。第二行给第一个元素（黄色块）加上了 transform: scale(1) 后一切就变了，它盖住了第二个元素（蓝色块），后来居上的规则貌似不起作用了，这是为什么呢？
同样的，还是尝试从 W3C 规范中去寻找原因。在 中，我找到了一句和上一节基本一样的一句话：For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of a stacking context，也就是说 transform 值不为 none 的元素会创建一个 stacking context（层叠上下文）。层叠上下文，这是什么鬼？好像只听过块级格式化上下文（BFC）。
简单说来，层叠上下文与元素在 z 轴上的展示顺序相关，而且层叠上下文元素的层叠水平要比普通元素高，结合上面的例子来说就是：
- 根元素是层叠上下文元素，蓝色块和黄色块都是它的子元素；
- 蓝色块由于 transform 值不为
none，所以升级为层叠上下文元素，因而它的层叠水平比黄色块（普通元素）高。
层叠上下文的内容值得深入地具体探究，这里推荐两个不错内容，一个是 ，另外一个则是 。
写在最后
当使用 CSS 遇到奇奇怪怪问题的时候，我们既可以在 Google 或者 StackOverflow 上寻找答案，也不要忘了 W3C 的存在。有时真相其实早已静静地躺在标准当中，只要我们肯于寻找、善于寻找，定能找到 ^_^