作者：汪娇娇
时间：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属性。
评论(8)
引用来自“九月八”的评论
引用来自“九月八”的评论
我想做一个移动端的模态弹窗类似mint的popup，从下方滑动上来，并且有一个遮盖层，就会出现你说的z-index失效的问题，因为是用transform控制的滑动效果，导致弹窗会在遮盖层下面运动，运动结束后才浮到遮盖层上面，求解决方法引用来自“娇娇jojojo”的评论
你把z-index控制的元素都改用tranform来控制试试感谢楼主给我启发，哈哈:kissing_heart:
引用来自“九月八”的评论
我想做一个移动端的模态弹窗类似mint的popup，从下方滑动上来，并且有一个遮盖层，就会出现你说的z-index失效的问题，因为是用transform控制的滑动效果，导致弹窗会在遮盖层下面运动，运动结束后才浮到遮盖层上面，求解决方法引用来自“娇娇jojojo”的评论
你把z-index控制的元素都改用tranform来控制试试感谢楼主给我启发，哈哈:kissing_heart:
引用来自“九月八”的评论
我想做一个移动端的模态弹窗类似mint的popup，从下方滑动上来，并且有一个遮盖层，就会出现你说的z-index失效的问题，因为是用transform控制的滑动效果，导致弹窗会在遮盖层下面运动，运动结束后才浮到遮盖层上面，求解决方法引用来自“natzon”的评论
吹毛求疵一下，transform-style:preserver-3d，多打了个r，应该是transform-style:preserve-3d，:sweat_smile:
已经很赞了，学到了学到了
已经很赞了，学到了学到了
引用来自“leonard96”的评论
赞~