一、层叠上下文 MDN
层叠上下文 是指网页上的元素如何显示在其他元素之上，就像您可以将桌面上的索引卡并排放置或相互重叠一样。
当元素重叠的时候，会按照以下规则优先显示在离用户更近的地方，如果两个元素为普通元素，在没有以下指定特性的情况下，会按照后来居上的规则进行覆盖。
image.png
二、机制
-
以下行为会建层叠上下文
image.png
定位元素和flex项可以设置z-index来控制层叠顺序
其他方法的z-index为0级别,遵循后来居上原则
- 每一个元素都有自己的层叠上下文环境，默认的是根元素，也就是HTML元素,但是为一个元素创建层叠上下文时候，该元素就成了该元素的所有子元素的层叠上下文环境。
.box {
width: 100px;
height: 200px;
background: red;
position: relative;
}
.box img {
width: 200px;
position: absolute;
z-index: -1;
}
image.png
为什么图片会在他的父元素背景的下面呢？
那是应为上面说的所有元素默认的层叠上下文环境是根元素，按照我们层叠图来看负值的z-index层叠元素会在块级元素的后面，所以图片会跑到父元素的后面，但是只要为把它的父元素变成层叠元素，他的所有子元素就都会重新依赖于该父元素进行排序重叠。
.box {
width: 100px;
height: 200px;
background: red;
position: relative;
z-index: 0; // 把z-index修改为0，就可以创层叠上下文。
}
image.png
-
层叠上下文的一些行为
image.png
1.定位元素默认z-index: auto可以看成是z-index：0；
如果普通元素与层叠上下文元素发生重叠的时候，具有层叠上下文的元素会覆盖普通元素。
.a {
width: 100px;
height: 200px;
background: red;
}
.b {
width: 100px;
height: 100px;
background: yellow;
position: relative;
top: -150px;
}
image.png
2、z-index层叠顺序的比较止步于父级层叠上下文
层叠上下文是可以嵌套的，也就是一个层叠上下文元素的子元素可以建立自己的层叠上下文。但是该元素的层叠上下文不作用于父级上下文之外，该上下文只作用于该父级层叠上下文里面。
.a {
width: 100px;
height: 100px;
background: red;
position: relative;
z-index: 1;
}
.a .img {
position: absloute;
z-index: 999;
}
.b {
width: 100px;
height: 100px;
position: relative;
top: -10px;
z-index: 1;
}
.b .img {
position: absloute;
z-index: -1;
}
image.png
我们会发现就算.a盒子里面的图片设置很大的z-index还是被设置-1的.b盒子里面的图片给覆盖，原因是.a和.b和都设置为层叠上下文元素，而b的层叠顺序比较高。
