影響了兩天的問題，終於解決了，各種js計算高度，平移，結合c3，最后發現js計算后，是c3層級問題，希望能幫到園友，說明如下：
問題：
當一個或多個元素同時使用 如 transform: translateY(-100px);時， transform會默認 修改 元素的層級關系，
即，會出圖一這種，下方藍色元素向上平移時，遮擋上方紅色元素的現象。
思路：知道是層級關系的問題，就可以使用 position中的 z-index 來自定義修改原色的層級關系即可；
（注，修改z-index時，注意項目代碼中其他使用z-index中是否會受影響！！！）
解決后的，如圖二中，下面藍色元素向上平移時，在 上方紅色元素下面。
一、出現問題的效果及代碼
1、貼效果圖
2、貼代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 180px; height: 180px; background-color: red; } .child1 { transform: translate3d(0,0,0); } .child2 { background-color: blue; } .child2 { transform: translateY(-100px); } </style> </head> <body> <div> <div class='child1'></div> <div class='child2'></div> </div> </body> </html>
二、准確的效果圖及代碼
1、效果圖
2、貼代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 180px; height: 180px; background-color: red; } .child1 { transform: translate3d(0,0,0); position: relative; z-index: 10; } .child2 { background-color: blue; position: relative; z-index: 2; } .child2 { transform: translateY(-100px); } </style> </head> <body> <div> <div class='child1'></div> <div class='child2'></div> </div> </body> </html>