文档章节

CSS3 transform 引起z-index失效

娇娇jojo
 娇娇jojo
发布于 2017/09/05 15:11
字数 441
阅读 644
收藏 17

作者:汪娇娇

时间: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属性。

 

-webkit-overflow-scrolling: touch; 也会引起 stacking context,具体可参见以下博文:

https://www.cnblogs.com/chris-oil/p/6164966.html

© 著作权归作者所有

共有 人打赏支持
娇娇jojo
粉丝 182
博文 59
码字总数 64429
作品 0
海淀
私信 提问
加载中

评论(8)

娇娇jojo
娇娇jojo

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

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

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

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

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

回复@九月八 : 哈哈哈 解决了就好
九月八
九月八

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

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

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

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

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

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

引用来自“natzon”的评论

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

回复@natzon : 哈哈哈,马上改掉
natzon
natzon
吹毛求疵一下,transform-style:preserver-3d,多打了个r,应该是transform-style:preserve-3d,😅
已经很赞了,学到了学到了
娇娇jojo
娇娇jojo

引用来自“leonard96”的评论

赞~
😋
leonard96
leonard96
赞~
css3的transform造成z-index无效, 附我的牛逼解法。

我想锁表头及锁定列。昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。 只锁头效果很好,IE11下会小抖,但chrome下很稳定停在那里。后来又加上锁定列,发现列会盖住表头。 百...

noonoo
2014/12/04
0
0
JavaScript 图片3D展示空间(3DRoom)

一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果。 程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间。 很久以前就...

青衫无名
2017/12/04
0
0
CSS3 3D Transform

前2011年5月就在站上写了一篇《CSS3 Transform》介绍CSS3中Transform属性的简单应用。但这篇文章里的知识无法满足大家对Transform的一个全面认识,最近重新整理了一个Transform系列的文章,希...

石佛慈悲
2013/12/16
0
0
认识CSS中的z-index元素层级属性

Z-index:指定了元素及其子元素的Z轴顺序,在Z元素发生覆盖的时候,哪个在下面,哪个在上面,一般都由Z-index来决定。Z-index的支持的属性值有:z-index:auto/整数/inherit;基本特性有:支持...

hyz000
2016/04/21
1K
0
---CSS3绘制8种超炫的加载动画

CSS3绘制8种超炫的加载动画 逛前端开发网站的时候,偶尔发现一组非常炫酷的CSS3加载动画,遂迫不及待的做个Demo保存下来。 这些加载动画用到了CSS3的旋转transform属性,颜色透明度设置和伪元...

海博1600
2018/07/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

告别2018

今天中午从喵喵家回来之后,倒头就睡到下午4点了。可能是之前透支的身体,在我放松下来后,开始觉得疲惫了,所以最近估计会进入嗜睡期。醒来之后,拿了包花生,开了瓶低糖菊花茶,听着网易云...

七木网络科技
18分钟前
1
0
MySql数据库分表分区实践

1. 背景 —— 公司物联网项目 海量设备通过物联网服务接入云端,设备每30s上报一次自身数据(以下称为动态数据)。 物联网服务将设备上报的数据转发给数据处理网关,由数据入库网关执行批量入...

吴伟祥
31分钟前
1
0
大表关联走hash优化

大表关联走hash? 案例: ---- 反正我执行过1个多小时,没有跑完 SELECT a.id AS order_id ,b.s_id AS bill_id, d.id AS sub_order_id, d.deal_oper_id FROM EM_ORDER PARTITION(EM_ORDER_20......

hnairdb
43分钟前
1
0
MySQL查询执行

当我们希望MySQL能够以更高的性能运行查询时,最好的办法就是弄清楚MySQL是如何优化和执行查询的。一旦理解了这一点,很多查询优化工作实际上就是遵循一些原则让优化器能够按照预想的合理方式...

问题终结者
今天
1
0
CDH5动静态资源池配置与回滚

关于动态 静态资源池的配置以前都有提过,可以从以下几篇了解: YARN动态资源池配置案例 https://yq.aliyun.com/ziliao/346856# Hadoop YARN配置参数剖析(4)—Fair Scheduler相关参数 Hadoop...

hblt-j
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部