专业编程基础技术教程

首页

网站首页 > 基础教程正文

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

ccvgpt 2024-10-10 05:07:49 基础教程 12 ℃

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

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

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

解决办法就是父元素设置

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

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

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

上一篇： Transform(CSS动态属性的开始) css动态菜单
下一篇：如何让球体旋转起来?CSS3帮你实现

猜你喜欢

2024-10-10 让交互更加生动!有意思的鼠标跟随 3D 旋转动效
2024-10-10 「抖音最火」的3D旋转透视酷炫相册，如何用CSS3去实现
2024-10-10 纯CSS3实现旋转流星旋转光环效果 css旋转动画效果
2024-10-10 CSS3旋转实例学习(附3D旋转实例) css3实现360度旋转
2024-10-10 CSS3之日记翻页效果详解日记翻页视频的模板
2024-10-10 如何使用纯CSS技术实现3D书本动态展示效果?
2024-10-10 CSS3之3D魔方鼠标控制酷炫效果 3d魔方代码
2024-10-10 CSS3专题(五)—实力宠粉，来了，来了，你们要的3D幻灯片来了
2024-10-10 css之3D效果——正方体 css正方体照片墙源码
2024-10-10 26.HTML 2D和3D变换 html2d旋转

最近发表