每日一击:z-index与translateZ

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

z-index

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

transform

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

 

失效怎么办

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

transform: translateZ(1px);

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

 

未经允许不得转载:前端学堂fed123(Frontend education) » 每日一击:z-index与translateZ

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址