网站首页 > 技术文章正文

填坑:transform元素导致zindex失效终极方法

hmc789 2024-11-18 13:01:43 技术文章 2 ℃

今天遇到了使用css3动画的元素层级被放大置顶的问题，ios浏览器上没问题，安卓原生浏览器和安卓微信上有问题。

使用了css3动画的元素z-index失效，兄弟元素设置多高的z-index都盖不住

解决办法就是父元素设置

transform-style:preserve-3d;
需要解决层级问题的所有元素都加上

transform:translateZ(0);
translateZ()的值随元素层级自行设置

来源切图网 qietu.com -专注web前端开发。