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