文档章节

CSS3 transform 引起z-index失效

娇娇jojo
 娇娇jojo
发布于 2017/09/05 15:11
字数 345
阅读 602
收藏 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属性。

 

© 著作权归作者所有

共有 人打赏支持
娇娇jojo
粉丝 177
博文 59
码字总数 64333
作品 0
海淀
加载中

评论(8)

娇娇jojo
娇娇jojo

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

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

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

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

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

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

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

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

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

你把z-index控制的元素都改用tranform来控制试试
问题解决了,问题出在遮盖层的opacity的问题上,用背景色的rgba代替遮盖层的透明度就ok啦~
感谢楼主给我启发,哈哈:kissing_heart:
娇娇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,:sweat_smile:
已经很赞了,学到了学到了

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

引用来自“leonard96”的评论

赞~
:yum:
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
07/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Swift-系统默认UICollectionViewController的基本用法

不用xib创建时,需要重写 override init(collectionViewLayout layout: UICollectionViewLayout){} 在调用时需传 UICollectionViewLayout值,不然就会报错 let layout = UICollectionViewFlow......

west_zll
15分钟前
1
0
Spring Boot 最核心的 3 个注解详解

最近面试一些 Java 开发者,他们其中有些在公司实际用过 Spring Boot, 有些是自己兴趣爱好在业余自己学习过。然而,当我问他们 Spring Boot 最核心的 3 个注解是什么,令我失望的是鲜有人能答...

Java技术栈
16分钟前
1
0
Sqoop 增量导入导出及Job操作示例

增量导入 递增列的增量导入append # 第一次导入[root@node222 ~]# /usr/local/sqoop-1.4.7/bin/sqoop import --connect jdbc:mysql://192.168.0.200:3306/sakila?useSSL=false --table ac......

PeakFang-BOK
22分钟前
1
0
Thread中断的理解

★中断的理解:1)中断可以理解为线程的一个标识位属性;2)表示一个运行中的线程是否被其他线程进行了中断操作 中断好比其他线程向该线程打了个招呼,其他线程通过调用该线程的interrupt()...

karma123
30分钟前
1
0
App store 侵权投诉

App Store Content Dispute 侵权投诉 https://www.apple.com/legal/internet-services/itunes/appstorenotices/#?lang=zh...

壹峰
53分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部