文档章节

CSS3 transform 引起z-index失效

娇娇jojojo
 娇娇jojojo
发布于 2017/09/05 15:11
字数 345
阅读 577
收藏 17
点赞 3
评论 8

作者:汪娇娇

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

 

© 著作权归作者所有

共有 人打赏支持
娇娇jojojo
粉丝 169
博文 58
码字总数 64020
作品 0
海淀
加载中

评论(8)

娇娇jojojo
娇娇jojojo

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

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

我想做一个移动端的模态弹窗类似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:
娇娇jojojo
娇娇jojojo

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

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

引用来自“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:
已经很赞了,学到了学到了
娇娇jojojo
娇娇jojojo

引用来自“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
【前端优化之渲染优化】大屏android手机动画丢帧的背后

前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节、聊了双方团队在干什么,最后聊到了前端优化。因为...

范大脚脚
2017/10/20
0
0
CSS3变形详情介绍

WEB设计师借助CSS3可以轻松实现倾斜,缩放,移动及翻转元素 1.变形简介 CSS3变形时一些效果的集合,比如平移、旋转以及缩放效果,每个效果都称为变形函数(Transform Function),在CSS没有变...

TyrionJ的博客
2017/12/18
0
0
HTML CSS笔记变形效果-过渡效果-动画效果

一.transform CSS3 提供了元素变形效果,也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个:transform 和 transform-origin。 对于 transform 的属性值,具体如下表: //向...

菜鸟不菜么
05/01
0
0
CSS3 3D翻转动画

图片来自网络 CSS3动画属性: transform(变换):大小、位置、颜色、变形等状态的变化 transition(过渡):初始状态过渡到结束状态这个过程中产生的动画 animation(动画):定义关键帧动画...

Neuro_annie
2017/05/18
0
0
深入理解CSS中的层叠上下文和层叠顺序

深入理解CSS中的层叠上下文和层叠顺序 上下文 前端大全 · 2016-01-20 20:12 (点击上方公众号,可快速关注) 作者:张鑫旭 网址:http://www.zhangxinxu.com/wordpress/2016/01/understand-cs...

LorinLuo
2016/03/03
51
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

pbgo: 基于Protobuf的迷你RPC/REST框架

https://www.oschina.net/p/pbgo

chai2010
35分钟前
0
0
rsync工具介绍、常用选项以及通过ssh同步

linux下的文件同步工具 rsync rsync是非常实用的一个同步工具,可以从a机器到b机器传输一个文件,也可以备份数据,系统默认没有这个工具,要使用命令 yum install -y rsync 安装。 rsync的命...

黄昏残影
51分钟前
0
0
OSChina 周四乱弹 —— 表妹要嫁人 舅妈叮嘱……

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @哈哈哈哈哈嗝:一定要听——The Pancakes的单曲《咁咁咁》 《咁咁咁》- The Pancakes 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :...

小小编辑
今天
245
4
流利阅读笔记30-20180719待学习

重磅:让人类得老年痴呆的竟是它? Lala 2018-07-19 1.今日导读 去年奥斯卡最佳动画长片《寻梦环游记》里有一句经典台词:“比死亡更可怕的,是遗忘”。在电影中,年迈的曾祖母会重复说一样的...

aibinxiao
今天
3
0
1.16 Linux机器相互登录

Linux机器之间以密码方式互相登录 运行命令#ssh [ip address],标准命令:#ssh [username]@ip, 如果没有写用户名,则默认为系统当前登录的用户 命令#w查看系统负载,可查看到连接到该主机的...

小丑鱼00
今天
0
0
about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
2
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
1
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部