z-index学习知识小结
一、z-index七阶层叠顺序表
1.层叠顺序的大小比较:
background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index:auto或者看成z-index:0 /不依赖z-index的层叠上下文< 正z-index。
2.层叠顺序级别高的元素覆盖级别低的元素。
二、z-index与创建层叠上下文
1.首先要注意,z-index:auto 虽然可以看作z-index:0 ,但是这仅仅是在层叠顺序的比较上;从层叠上下文上讲,二者有本质差别:auto 不会创建层叠上下文,z-index:0 会创建层叠上下文。
注意有一种特殊情况,那就是IE7下,auto也会创建层叠上下文,不符合标准。
2.z-index层叠顺序的比较止步于父级层叠上下文
控制视图时,如果父级元素没有层叠上下文,则会一直找到根元素作为层叠上下文
3.z-index:数字 + 元素属性 配合得到层叠上下文
①position:absolute/relative以及FireFox/IE下的position:fixed;
当z-index的值为auto时,元素还是普通元素,当z-index的值为具体数字时,就会创建层叠上下文
②z-index值不为auto的flex项(display:flex/inline-flex;)
层叠上下文元素是flex子元素,而不是flex容器元素
4.不需要与z-index:数字 配合就可以创建层叠上下文的属性
①元素的opacity值不为1;
②元素的transform值不为none;
③元素mix-blend-mode(混合模式)值不为normal;
④元素的filter(css3里的滤镜,不是指IE6/7/8/9里私有的那个滤镜)值不为none;
⑤元素的isolation(隔离)值是isolate(元素是孤立的)
isolation:isolate这个声明是mix-blend-mode应运而生的。 默认情况下,mix-blend-mode会混合z轴所有层叠在下面的元素,如果我们不希望某个层叠的元素参与混合就可以使用isolation:isolate。
⑥position:fixed声明,部分浏览器(FireFox/IE)需要z-index:数字 配合 ⑦will-change指定的属性值为上面任意一个
will-change的作用:增强页面渲染性能,即准备GPU(图形处理器)让浏览器加速渲染的
什么是GPU(图形处理器)?GPU是与处理和绘制图形相关的硬件。 GPU是专为执行复杂的数学和几何计算而设计的,可以让CPU从图形处理的任务中解放出来,从而执行其他更多的系统任务,例如,页面的计算与重绘。
当我们通过某些行为(点击、移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧,于是卡顿。而will-change则是真正的行为触发之前告诉浏览器,提前预约从容不迫;突然造访手忙脚乱。
⑧元素的-webkit-overflow-scrolling设为touch(移动端特有的原生的滚动)
5.不支持z-index层叠上下文元素的层叠顺序均是z-index:auto;
6.为何定位元素会覆盖普通元素?
例如当图片使用了position:relative;此时图片z-index:auto;这时图片的的层叠顺序 > 内联元素(普通的图片文字是内联元素,层叠顺序是inline/inline-block),所以会覆盖。
三、z-index相关实践时注意的一些原则
1.最小化影响原则
目的:避免z-index嵌套层叠关系混乱
原因:①元素的层叠水平主要由所在的层叠上下文决定
②IE7 z-index:auto;也会新建层叠上下文
做法:①避免使用定位属性
②定位属性从大容器平级分离为私有小容器(relative课程)
2.不犯二准则
目的:避免z-index混乱,出现一山比一山高的样式问题
原因:多人协作以及后期维护
做法:对于非浮层元素,避免设置z-index值,z-index没有任何道理需要超过2
(浮层元素:比如弹框,在页面里拖来拖去)
3.组件层级计数器
目的:避免浮层组件因z-index背覆盖的问题
原因:①总会遇到意想不到的高层级元素(比如其他团队介入,或者使用网上的其他组件)
②组件的覆盖规则具有动态性(比如一个页面有好多个弹框)
做法:组件层级计数器方法:通过js获得body下子元素的最大z-index值,
例如组件默认是m,而body最大是n(n>m),那么就把组件设置为n+1
4.可访问性隐藏 人肉眼看不见,但是辅助设备可以识别的隐藏
z-index负值元素在层叠上下文的背景之上,其他元素之下
做法:z-index:-1;
eg:
html代码:
<input type="submit" id="submit" />
<label for="submit">提交</label> <!--label的 for关联模拟,兼容性很好-->
css代码:
[type=submit]{ position:absolute; z-index:-1; }
最后,以上内容是最近学习视频内容的大概总结,视频链接:http://www.imooc.com/learn/643
本文链接:http://www.cnblogs.com/xsilence/p/5495857.html
z-index学习知识小结的更多相关文章
- React.js学习知识小结(一)
学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上 ...
- html5-基本知识小结及补充
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- HTTPS知识小结
HTTPS知识小结 背景1:TCP握手 internet上的两台机器A,B要建立起HTTP连接了,在这之前要先建立TCP连接,情景大概是这样子的: A:你好,我跟你建立一个TCP好吗? B:好啊. A ...
- 180531-Spring中JavaConfig知识小结
原文链接:Spring中JavaConfig知识小结/ Sring中JavaConfig使用姿势 去掉xml的配置方式,改成用Java来配置,最常见的就是将xml中的 bean定义, scanner包 ...
- javascript之正则表达式基础知识小结
javascript之正则表达式基础知识小结,对于学习正则表达式的朋友是个不错的基础入门资料. 元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要 ...
- openresty 学习笔记小结:综合应用实例
openresty 学习笔记小结:综合应用实例 这个综合实验实现的功能其实很简单,用户访问一个页面,显示一个默认页面.输入参数(post或者get都可以),如果参数在数据库查询得到并满足一定条件,根据 ...
- Atitit learn by need 需要的时候学与预先学习知识图谱路线图
Atitit learn by need 需要的时候学与预先学习知识图谱路线图 1. 体系化是什么 架构 知识图谱路线图思维导图的重要性11.1. 体系就是架构21.2. 只见树木不见森林21.3. ...
- Android app开发知识小结
Android知识小结 这是一个知识的总结,所以没有详解的讲解. 一.分辨率Android中dp长度.sp字体使用.px像素.in英寸.pt英寸1/72.mm毫米 了解dp首先要知道density,d ...
- C/C++ 位域知识小结
C/C++ 位域知识小结 几篇较全面的位域相关的文章: http://www.uplook.cn/blog/9/93362/ C/C++位域(Bit-fields)之我见 C中的位域与大小端问题 内存 ...
随机推荐
- 8种效果实例-jQuery anoSlide 焦点图轮播
anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件. 在线实例 单个 多个 动画延迟 自动播放 显示分页 显示标题 延迟加载 自适应高度 使用方法 <div cl ...
- Quill – 可以灵活自定义的开源的富文本编辑器
Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题.如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求. Quill ...
- MySQL之MySQL5.7安装包(msi文件)在Windows8下安装
最近自己在使用MySQL5.7.16.msi安装MySQL.自己下载的是.msi文件,在安装的过程中遇到了许多文件,网上大部分的Blog都是关于免安装包的安装方法,希望我的方法对大家有帮助. 1,下载 ...
- go语言条件语句 if else
示例: if a < 5 { return 0 } else { return 1 } 关于条件语句,需要注意以下几点: 条件语句不需要使用括号将条件包含起来(): 无论语句体内有几条语 ...
- 简单的gulpfile.js参数配置
这里gulp安装和模块安装我就不提了,先简单写一些配置函数 for example /** * Created by yumeiqiang on 16/7/26. */var gulp = requi ...
- Android 开源框架Universal-Image-Loader完全解析(三)---源代码解读
转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/39057201),请尊重他人的辛勤劳动成果,谢谢! 本篇文章 ...
- Android项目实战(十九):Android Studio 优秀插件: Parcelable Code Generator
Android Studio 优秀插件系列: Android Studio 优秀插件(一):GsonFormat Android Studio 优秀插件(二): Parcelable Code Gen ...
- (20160602)开源第三方学习之SDWebImage
这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. 地址:https://github.com/rs/SDWebIm ...
- xcode 删除文件后编译会出现*** is missing from working copy
删除文件后 工程中会出现如图所示 如果你使用了svn管理工具 你就会看到如图所示 然后 选中 删除 就可以了 好了 多了 不多说了 最近比较忙 博客写的比较 少 等闲了 一定会 ...
- 【原】iOS设计模式之:建造者模式Builder Pattern,用于改进初始化参数
本文主要讨论一下iOS中的Builder Pattern.与网上很多版本不同,本文不去长篇大论地解释建造者模式的概念,那些东西太虚了.设计模式这种东西是为了解决实际问题的,不能为了设计模式而设计模式, ...