CSS3 transform 引起z-index失效
CSS3 transform 引起z-index失效
娇娇jojojo 发表于3个月前
CSS3 transform 引起z-index失效
  • 发表于 3个月前
  • 阅读 451
  • 收藏 17
  • 点赞 3
  • 评论 8

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: transform 、stacking context、z-index失效

作者:汪娇娇

时间:2017年9月5日

单纯的z-index,可以通过设置数值的大小来决定层级的高低,但一涉及transform,z-index就失效了,为什么咩?

辣是因为,web中的任何元素都存在于一个三维空间中,除了大家熟知的平面画布中的x轴y轴之外,还有控制第三维度的z轴

在CSS中使用margin、float、offset这些属性,可以控制元素在x轴和y轴上的表现。而z轴上的表现形式可以通过z-indextransform来控制。那它俩是怎么控制z轴的呢?

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

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

@注:transform会创建更高层级的stacking context(堆叠上下文),所以z-index会失效。能同样创建stacking context的还有opacity属性。

 

共有 人打赏支持
粉丝 129
博文 45
码字总数 50413
评论 (8)
leonard96
赞~
娇娇jojojo

引用来自“leonard96”的评论

赞~
:yum:
natzon
吹毛求疵一下,transform-style:preserver-3d,多打了个r,应该是transform-style:preserve-3d,:sweat_smile:
已经很赞了,学到了学到了
娇娇jojojo

引用来自“natzon”的评论

吹毛求疵一下,transform-style:preserver-3d,多打了个r,应该是transform-style:preserve-3d,:sweat_smile:
已经很赞了,学到了学到了

回复@natzon : 哈哈哈,马上改掉
九月八
我想做一个移动端的模态弹窗类似mint的popup,从下方滑动上来,并且有一个遮盖层,就会出现你说的z-index失效的问题,因为是用transform控制的滑动效果,导致弹窗会在遮盖层下面运动,运动结束后才浮到遮盖层上面,求解决方法
娇娇jojojo

引用来自“九月八”的评论

我想做一个移动端的模态弹窗类似mint的popup,从下方滑动上来,并且有一个遮盖层,就会出现你说的z-index失效的问题,因为是用transform控制的滑动效果,导致弹窗会在遮盖层下面运动,运动结束后才浮到遮盖层上面,求解决方法
你把z-index控制的元素都改用tranform来控制试试
九月八

引用来自“九月八”的评论

我想做一个移动端的模态弹窗类似mint的popup,从下方滑动上来,并且有一个遮盖层,就会出现你说的z-index失效的问题,因为是用transform控制的滑动效果,导致弹窗会在遮盖层下面运动,运动结束后才浮到遮盖层上面,求解决方法

引用来自“娇娇jojojo”的评论

你把z-index控制的元素都改用tranform来控制试试
问题解决了,问题出在遮盖层的opacity的问题上,用背景色的rgba代替遮盖层的透明度就ok啦~
感谢楼主给我启发,哈哈:kissing_heart:
娇娇jojojo

引用来自“九月八”的评论

引用来自“九月八”的评论

我想做一个移动端的模态弹窗类似mint的popup,从下方滑动上来,并且有一个遮盖层,就会出现你说的z-index失效的问题,因为是用transform控制的滑动效果,导致弹窗会在遮盖层下面运动,运动结束后才浮到遮盖层上面,求解决方法

引用来自“娇娇jojojo”的评论

你把z-index控制的元素都改用tranform来控制试试
问题解决了,问题出在遮盖层的opacity的问题上,用背景色的rgba代替遮盖层的透明度就ok啦~
感谢楼主给我启发,哈哈:kissing_heart:

回复@九月八 : 哈哈哈 解决了就好
×
娇娇jojojo
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: