每日一击：z-index与translateZ

我们在写样式的时候，经常会用到 transform: translate3d(0px, 0px, 0px)，据说这个还能开启浏览器动画硬件加速。但是你知道吗，这里面包含了一个坑，那就是translate3d(0px, 0px, 0px) 实际上包含了translateZ: 0px; 这个属性和z-index在一起使用的时候，z-index是失效的。

z-index

通过z-index控制z轴，需要配合position属性，且position的属性值为relative、absolute、fixed和sticky时。并且给z-index显式的设置数值，数值越大，其层级越高。简单点说，数值越高，元素越在顶上。

transform

transform可以通过它的translateZ()来改变元素的层叠顺序，其值越大，越在顶层，离屏幕越近。不过通过transform:translateZ()改变元素z轴的层级，必须在元素的父元素中显示的设置transform-style: preserve-3d或者在transform中显示的设置perspective()或者使用translate3D。

失效怎么办

如果z-index失效，需要增加

transform: translateZ(1px);

保证translateZ按照你需要的层级来就好了。

知识共享署名 4.0 国际许可协议，转载请保留出处：前端123学堂 » 每日一击：z-index与translateZ