昨天偶然看到一道面試題：
<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/