單純的z-index，可以通過設置數值的大小來決定層級的高低，但一涉及transform，z-index就失效了，為什么咩？
那是因為，web中的任何元素都存在於一個三維空間中，除了大家熟知的平面畫布中的x軸和y軸之外，還有控制第三維度的z軸。
在CSS中使用margin、float、offset這些屬性，可以控制元素在x軸和y軸上的表現。而z軸上的表現形式可以通過z-index和transform來控制。那它倆是怎么控制z軸的呢？
z-index控制z軸，需要配合position屬性，且position的屬性值為relative、absolute、fixed和sticky時。並且給z-index顯式的設置數值，數值越大，其層級越高。簡單點說，數值越高，元素越在頂上。
transform可以通過它的translateZ() 來改變元素的層疊順序，其值越大，越在頂層，離屏幕越近。不過通過transform:translateZ() 改變元素z軸的層級，必須在元素的父元素中顯示的設置transform-style:preserver-3d 或者在transform中顯示的設置perspective() 。
@注：transform會創建更高層級的stacking context（堆疊上下文），所以z-index會失效。能同樣創建stacking context的還有opacity屬性。