CSS3 transform 引發z-index失效

做者：汪嬌嬌

時間：2017年9月5日

單純的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:preserve-3d 或者在transform中顯示的設置perspective() 。

@注：transform會建立更高層級的stacking context（堆疊上下文），因此z-index會失效。能一樣建立stacking context的還有opacity屬性。

 

-webkit-overflow-scrolling: touch; 也會引發 stacking context，具體可參見如下博文：

http://www.javashuo.com/article/p-tieidgqd-u.html