昨天偶然看到一道面试题：
<div> <div class='child1'></div> <div class='child2'></div> <div class='child3'></div> </div> .child2 { transform: translateY(200px) }
设定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/