第一节：z-index基础
较大的z-index会覆盖较小的那个z-index元素
z-index:auto 默认值
z-index:integer:整数
z-index:inherit：继承
1、支持负值
2、支持css3animation动画
3、在css2.1时代，需要和定位元素配合使用
不考虑css3,只有定位元素的z-index才有作用，在css3中有例外
第二节：z-index和定位元素
常识：z-index只对定位元素起作用
定位元素：absolute、relative、fixed、sticky
如果定位元素z-index没有发生嵌套
1、后来居上的准则
后面的dom覆盖前面的
2、谁大谁在上面
z-index大的在上面
如果定位元素发生了嵌套
1、祖先优先原则（前提是z-index为数值）
就是由父级来决定
例：
虽然下面的图片的z-index为1比上面的img的z-index小，但是由于有嵌套定位，所以会根据后来居上的原则
结果是下面的图片覆盖了上面的图片
z-index是数值，而不是auto
z-index：auto—->当前层叠上下文的生成盒子层叠水平是0，盒子（除非是根元素），不会创建一个新的层叠上下文。
第三节：理解css的层叠上下文和层叠水平
◆层叠上下文：
是一个三维概念，表示在z轴上有了“可以高人一等”，层叠上下文离我们的眼睛更近，如果发生重叠会覆盖
1、页面元素天生具有层叠上下文，称之为“根层叠上下文”
2、z-index值为数值的定位元素也具有层叠上下文
3、其他的一些属性也有层叠上下文
◆层叠水平
层叠上下文中的每个元素都有一个层叠水平，决定了同一个层叠上下文元素在z轴上的显示顺序，遵循“后来居上”和“谁大谁上”的层叠准则
层叠水平是看离层叠上下文谁更近
第四节：理解元素的层叠顺序
层叠顺序：元素发生层叠时候有着特定的垂直显示顺序
7阶层叠水平：background-负z-index-block-float浮动盒子-inline/inline-block水平盒子-z-index：auto或者z-index:0-正index
例子：
img{float:left;margin-right:-20px;}
效果是文字在图片的上方，因为文字是内联元素，比float层叠顺序搞，所以文字在图片的上方
如果是相同级别的层叠顺序，那么遵循“后来居上”原则
第五节：z-index和层叠上下文
1、定位元素默认z-index:auto可以看成z-index：0
2、z-index不为auto的定位元素汇创建层叠上下文
3、z-index层叠顺序的比较止步于父级层叠上下文
为什么定位元素会覆盖普通元素？
如果是相同级别的层叠顺序，那么遵循“后来居上”原则
例子：
.a{}
.b{margin-left:-30px;}
效果:b这个图片覆盖在a图片的上方
但是改成下面的代码，那么就是相反的效果了
.a{position：relative}
.b{margin-left:-30px;}
分析；当a加上position：relative的时候，此时的z-index是auto，可以看成z-index:0,根据7阶层叠水平，可以知道z-index：auto和z-index：0是大于图片这个内联元素的
一旦容器z-index值为数值，图片的层叠上下文元素就变成了容器
其实z-index：auto和z-index：0在层叠上下文来讲，是有着本质差异的，但是从层叠顺序上看，z-index：auto可以看成z-index：0
第六节：其他参与层叠上下文的属性：
1、display：flex与层叠上下文
一般普通元素设置z-index是没用的，但是如果该元素的子元素的z-index不是auto的话，在该元素的下方设置display：flex的话，那么就会出现层叠效果了
2、设置透明度
.box{opacity: .5;background:blue}
.box >img{
position:relative ;z-index:-1;
}
这个时候图片会在层叠上下文背景的上方
3、transform不为none（图片旋转）
.box{transform：rotate（15deg);background:blue}
.box >img{
position:relative ;z-index:-1;
}
4、mix-blend-mode不为normal（图片亮度）
.box{mix-blend-mode:screen;background:blue}
.box >img{
position:relative ;z-index:-1;
}
5、filter不为none(模糊处理)
.box{filter:blur(5px);background:blue}
.box >img{
position:relative ;z-index:-1;
}
6、isolation：isolate（混合模式）
7、position：fixed（只在chrome等blink/webkit内核浏览器中有效）
8、will-change：transform
9、-webkit-overflow-scrolling(移动端特有的）
第七节：非定位元素层叠上下文与z-index的关系
1、不支持z-index的层叠上下文元素的层叠顺序均是z-index：auto级别
.img1{}
.img2{filter:blur(2px);}
.img3{position:relative;}
.img4{opacity: .9;}
.img5{transform:rotate(15deg);}
覆盖的顺序依次是img1
2、依赖z-index的层叠上下文元素的层叠顺序取决于z-index的值
两种依赖z-index创建层叠上下文的情况
①position为absolute/relative/fixed(部分浏览器)
②display：flex|inline-flex容器的子flex选项
例子1:
.a{position:absolute;z-index:1;}
.box{display:flex;background:blue;}
.box > img{z-index：1}
效果：b.jpg会在a.jpg的上面
例子2：
.a{position:absolute;z-index:1;}
.box{display:flex;background:blue;}
.box > img{z-index：-1}
效果：b.jpg会在a.jpg的上面
层叠上下文导致的有趣的现象
1、图片上覆盖一个文字（图片淡入淡出）
文字
text{
position:absolute;
}
img{
opacity:0->1;
}
就是设置透明度在0-1变化