摘要：声明，部分浏览器需要数字配合指定的属性值为上面任意一个的作用增强页面渲染性能，即准备图形处理器让浏览器加速渲染的什么是图形处理器是与处理和绘制图形相关的硬件。而则是真正的行为触发之前告诉浏览器，提前预约从容不迫突然造访手忙脚乱。
一、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代码：
css代码：
XML/HTML Code复制内容到剪贴板原文链接：https://www.cnblogs.com/lucktian/p/5523165.html
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1132.html
摘要：检查当前上下文中的参数，建立该对象下的属性与属性值。检查当前上下文的函数声明，也就是使用关键字声明的函数。数据类型跟布尔值比较回顾下前面说的要点然后有几个应该要知道的隐形转换和不能转换成其他任何值。 前言 2018/04/27 新增六，讲解浅拷贝和深拷贝的区别并简单实现, 七，原生JS操作DOM？2018/04/30 新增八，解决计算精度问题,例如0.1+0.2？2018/05/0...
摘要：检查当前上下文中的参数，建立该对象下的属性与属性值。检查当前上下文的函数声明，也就是使用关键字声明的函数。数据类型跟布尔值比较回顾下前面说的要点然后有几个应该要知道的隐形转换和不能转换成其他任何值。 前言 2018/04/27 新增六，讲解浅拷贝和深拷贝的区别并简单实现, 七，原生JS操作DOM？2018/04/30 新增八，解决计算精度问题,例如0.1+0.2？2018/05/0...
摘要：张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。 张鑫旭的CSS深入理解之z-index学习笔记 层叠上下文 什么是层叠上下文？在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。 如何产生层叠上下文？ 根元素具有根层叠上下文 z-index不为auto的定位元素 一个 z-index 值不为 ...
摘要：先上效果图正如标题所说，本文是教你如何巧用伪类制作下拉菜单，原生，无。实际例子其实就是主题的右上角那个按钮，你点一下就会有一个下拉菜单出现，在其他区域点击返回原状。为了让下拉菜单更显下拉的情况，采用的定位下转换原点。 原文链接：http://devework.com/css3-target-dropdown.html showImg(https://segmentfault.com/...
摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...
阅读 2059·2021-11-11 16:54
阅读 3132·2021-09-28 09:35
阅读 2350·2021-09-26 09:47
阅读 3753·2021-09-08 09:36
阅读 2526·2021-07-25 21:37
阅读 732·2019-08-30 15:54
阅读 2401·2019-08-30 14:22
阅读 3090·2019-08-30 13:57
