素材牛VIP会员
css transform:translateZ 导致z-index无效
 馒***火  分类:Html5  人气:971  回帖:1  发布于6年前 收藏

我在使用一个下拉刷新,无限滚动的Vue组件,这个组件在标签里生成了

transform: translate(0px, 0px) scale(1) translateZ(0px);

因为这个属性,导致组件里包含的标签无法改变z-index属性.

请问有什么解决方法吗?

这是我要实现的效果,我在Chrome devtool取消了transform属性之后的实现

讨论这个帖子(1)垃圾回帖将一律封号处理……

Lv4 码徒
wa***10 移动开发工程师 6年前#1

参见这个:
https://stackoverflow.com/que...
https://segmentfault.com/q/10...

由于z-index和transform用的是两个不同的层结构,使用transform的时候,z-index由于无法定位在z-index坐标系上的位置,所以会失效,可以试着用绝对定位替换transform

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取