一、z-index基础内容（入门）
1.z-index 含义
z-index属性指定了元素及其子元素的在 Z 轴上面的顺序，而在 Z 轴上面的顺序可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个
2.z-index 支持的属性值
- z-index:auto; 默认值
- z-index:int； 整数值
- z-index:inherit;继承父元素的z-index属性值
3.z-index的特性
- 支持负值
- 支持css3 animation动画
- 在css2.1时代，需要和定位元素配合使用
4.特殊点
如果不考虑css3 ,只有标记了定位元素position的z-index 才有作用，但是css3 中有例外
{
position：static;z-index:2;
}
{
position：relative;z-index:2;
}
{
position：absolute;z-index:2;
}
{
position：fixed;z-index:2;
}
{
position：sticky;z-index:2;
}
static:元素使用正常的布局行为，即元素在文档常规流中当前的布局位置
二、多个定位元素（应用）
1.如果定位元素z-index 没有嵌套
①后来居上的准则
②哪个大，哪个上
.one {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #ccc;
}
.two {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: pink;
}
<div class="one">one</div>
<div class="two">two</div>
①后来居上 （即默认按照dom元素排列的先后顺序，靠后的dom元素排列居上）
.one {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #ccc;
z-index: 2;
}
.two {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: pink;
z-index: 1;
}
<div class="one">one</div>
<div class="two">two</div>
②哪个大，哪个上（当设置有z-index的时候，按照z-index的值排列，值越大，越靠上）
2. 如果定位元素z-index发生嵌套
①祖先优先原则
②特殊情况
.parent-one {
position: relative;
z-index: 2;
}
.one {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #ccc;
z-index: 1;
}
.parent-two {
position: relative;
z-index: 1;
}
.two {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: pink;
z-index: 2;
}
<div class="parent-one">
<div class="one">one</div>
</div>
<div class="parent-two">
<div class="two">two</div>
</div>
①祖先优先原则（当有外层包裹发生嵌套的时候，两个元素的层级比较依赖于祖先的z-index值大小）
.parent-one {
position: relative;
z-index: auto;
}
.one {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #ccc;
z-index: 2;
}
.parent-two {
position: relative;
z-index: 1;
}
.two {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background-color: pink;
z-index: 1;
}
<div class="parent-one">
<div class="one">one</div>
</div>
<div class="parent-two">
<div class="two">two</div>
</div>
②特殊情况（当z-index的值为auto时，当前层叠上下文的生成盒子层叠水平为0，盒子（除非是根元素）不会创建一个新的层叠上下文，因此内层的z-index:2;起了作用）
三、理解css 中的层叠上下文和层叠水平（进阶）
1.概念
我们假定用户正面向（浏览器）视窗或网页，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性按照优先级顺序占据这个空间（可高人一等）
哪些元素具有层叠上下文呢？？？
层叠水平：
层叠上下文中的每个元素都有一个层叠水平（stacjing level），决定了同一个层叠上下文中元素在z轴上的显示顺序。
遵循“后来居上”和“谁大谁上”的原则。
层叠水平必须放在层叠上下文中来看，层叠水平和z-index并不是一个概念。
3. 层叠水平：
①著名的7阶层叠水平（规范层叠，更符合页面加载的功能和视觉呈现）
为什么是这样的排序？？？
内容是页面中最重要的实体，所以，层叠水平高。
4. z-index 与层叠上下文：
①特性：
- 定位元素默认z-index:auto可以看成是z-index:0;
- z-index不为auto的定位元素会创建层叠上下文；
- z-index层叠顺序的比较止步于父级层叠上下文;
1）为何定位元素会覆盖普通元素？
.a{
}
.b{
margin-left:-30px}
此时，右边的元素覆盖左边的元素，满足了基本的元素后来居上原则。
.a{
position:relative} z-index?
.b{
margin-left:-30px}
如果z-index不做设置，当有定位属性的时候，默认为z-index:auto; 也就是z-index为0。而根据层叠水平规则，z-index:auto是在inline（图片）之上的，因此会反转覆盖。
3）z-index与创建层叠上下文：
.box{
position: absolute;
background: blue;
}
.img{
position: relative;
margin-left: -100px;
}
此时根据层叠水平规则， inline在block之上
.box{
position: absolute;
background: blue;
z-index:0;
}
.img{
position: relative;
margin-left: -100px;
z-index:-1;
}
box添加z-index:0的属性时，此时图片的层叠上下文元素就变成了容器,box的背景色（前提是具有容器的层叠上下文）会在img之下
④z-index受限于层叠上下文：
.box1{
position: relative;
z-index:0;
}
.box1 img{
position: absolute;
z-index:9999;
}
.box2{
position: relative;
z-index:1;
}
.box2 img{
position: absolute;
z-index: -1;
}
5.其他CSS属性与层叠上下文
- 文档根元素（）；
- position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
- position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
- flex (flex) 容器的子元素，且 z-index 值不为 auto；
- grid (grid) 容器的子元素，且 z-index 值不为 auto；
- opacity 属性值小于 1 的元素（参见 the specification for opacity）；
- mix-blend-mode 属性值不为 normal 的元素；
- 以下任意属性值不为 none 的元素：
- isolation 属性值为 isolate 的元素；
- will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
- contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。
.box{
background:'blue';
}
.box>div {
z-index：1
}
.box>div>img{
position:relative;
z-index:-1;
}
<div class="box">
<div>
<img src="1.jpg" />
</div>
</div>
由于box不具有层叠上下文，因此img直接穿过box背景达到根元素的层叠上下文
.box{
display:flex;
background:'blue';
}
.box>div {
z-index：1
}
.box>div>img{
position:relative;
z-index:-1;
}
<div class="box">
<div>
<img src="1.jpg" />
</div>
</div>
这个并不能说是flex给box添加了层叠上下文而导致了这种情况，而是因为flex当前元素的子元素的z-index不为auto，因此让box具备层叠上下文。
6.z-index与其他CSS属性层叠上下文
①不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别
②依赖z-index的层叠上下文元素的层叠顺序取决于z-index值
四、z-index相关实践（实践）
1.最小化影响原则
目的：
避免z-index嵌套层叠关系混乱
原因：
1.元素的层叠水平主要是由所在的层叠上下文决定；
做法：
1.避免使用定位属性；
2.不犯二准则
目的：
避免z-index混乱，一山比一山高的样式问题。
原因：
多人协作以及后期维护。
做法：
对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2——不犯二准则。
3.组件层级计数器
目的：
避免浮层组件因z-index被覆盖的问题。
原因：
1.总会遇到意想不到的高层及元素；
2.组件的覆盖规则具有动态性；做法：
通过js获得body下子元素的最大z-index值
4.可访问性隐藏
概念：
人肉眼看不见，但是辅助设备可以识别。
做法：
使用z-index负值元素在层叠上下文的背景之上，其它元素之下。