Transform 对元素渲染的影响

设定transform之前：

设定后：                    

为什么会这样呢？回去仔细查了查，transform带来的影响如下： 

1.Transfrom 提升元素层叠顺序

当元素未设置float、position都为static的情况下，遇到重叠被覆盖的时候，给被覆盖的元素设置transform样式，被覆盖的元素层级会被提升，但是会受opacity属性的影响。

元素应用了transform属性之后，就会变得应用了position:relative一个尿性，原本应该被覆盖的元素会变成覆盖其他元素。使用opacity可以恢复因transform对元素造成的层级（按渲染顺序的层级）变化。当然，给元素设置position和z-index也可以达到同样的效果。

2.Transform 限制 position: fixed 的窗口固定

固定定位position:fixed可以让元素不跟随浏览器的滚动条滚动，而且这种跟随效果连它的兄弟们position:relative/absolute都限制不了。但是，position:fixed的固定效果在遇到transform时，会直接降级变成position:absolute.

3. Transform 改变 overflow 对 absolute 子元素的限制

 当容器设置了溢出隐藏，其子元素溢出容器的部分自然会被隐藏，但是当子元素设置了绝对定位，脱离了正常文本流，在正常文本流中的位置不再存在，容器的溢出隐藏对这个绝对定位的子元素就没有用了（当然，容器设置相对定位的情况另谈）。当容器设置了transform属性，这个时候overflow: hidden对这个绝对定位的子元素就会生效，子元素溢出容器的部分就被隐藏了。

4、transform限制absolute的100%宽度大小

当容器设置了溢出隐藏，其子元素溢出容器的部分自然会被隐藏，但是当子元素设置了绝对定位，脱离了正常文本流，在正常文本流中的位置不再存在，容器的溢出隐藏对这个绝对定位的子元素就没有用了（当然，容器设置相对定位的情况另谈）并且设置z-index也无法解决，无论子元素的层级设多高，都是一样的结果。

至于那个面试题 第一条就可以解决啦！

参考：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/