我们在写样式的时候,经常会用到 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