啊，怎么说，不想写代码，不想上课，就这样写点博客度日多好
好，说回层叠上下文
- 层叠上下文是个啥？
- 层叠上下文是谁产生的？
- 有啥特点？
1.答：层叠上下文就是一个包含了一组堆叠层的元素。这可以是一个 html 元素创建的根层叠上下文，或者是一个由特定属性和值创建的局部层叠上下文。出处
-
答：下面是来自MDN的回答
-
答： 这就要放开了说了，我查了资料，看了视频，找了书籍，emmmmm，有点收获，如下
一、尚未设置z-index值的定位元素的z-index值是多少？ 首先，是拥有层叠上下文的元素，将离用户最近，也就是越靠在Z轴前面。默认情况下只有根元素HTML会产生一个层叠上下文，并且元素一旦使用了一些属性也将会产生一个层叠上下文，如我们常用的定位属性。如两个层叠上下文相遇时，总是后一个层叠前一个，这也就是常见的后来居上原则，除非使用z-index来改变。
比如下面这个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
border: 4px solid lightblue;
}
.img1{
width: 350px;
/*position: relative;*/
}
.img2{
width: 350px;
margin-left: -100px;
}
</style>
</head>
<body>
<img src="../img/preview.jpg" class="img1">
<img src="../img/preview.jpg" class="img2">
</body>
</html>
效果图：
很明显后面的图片遮盖了前面的图片，作为两个都没有定位的元素，自然会遵循‘后来居上’原则
再看这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
border: 4px solid lightblue;
}
.img1{
width: 350px;
position: relative;
}
.img2{
width: 350px;
margin-left: -100px;
}
</style>
</head>
<body>
<img src="../img/preview.jpg" class="img1">
<img src="../img/preview.jpg" class="img2">
</body>
</html>
效果图
第一个被定位之后，格局就发生了逆转，但是我们没有设置z-index值啊，这个时候z-index实际上取得就是默认值auto，说白了就是0，回到七阶图上，auto的层叠顺序仅次于取正值z-index的元素，问题解决了
二、定位元素设置了z-index值之后为啥表现得怪怪的？
首先要先了解这么一句话，z-index为负值的元素的层叠顺序是在层叠上下文元素（相当于有层叠关系的父级元素）的背景色之上的，在其他元素之下，具体还是看七阶层叠顺序表。
还是举个栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background: lightblue;
}
.box{
background: red;
position: absolute;
margin-left: 200px;
padding: 10px;
}
img{
width: 400px;
position: relative;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/preview.jpg" class="img1">
</div>
</body>
</html>
效果图：
结论： html元素（天生具有层叠上下文）背景色为lightblue，图片的容器背景色是red，且定位是absolute，图片定位为relative，此时的整个页面有如下特点：
- 只有一个层叠上下文，就是html与生俱来的
- 页面上没有z-index为数值的元素，不存在后天创建层叠上下文的元素
谨记：z-index为auto只是类比为z-index为0，而不能将其视为z-index的值就是0，但凡没有明文写出z-index值为数值的都不会产生层叠上下文
如果将图片的z-index修改为-1？
图片父容器的背景颜色透上来了，此时页面中还是只有一个层叠上下文（html搞的），所以z-index为负值的元素层叠顺序高于层叠上下文的背景颜色，好累，是时候祭出这张图了
再搞个事情，再搞出一个层叠上下文，把box的z-index修改为0,我最后再提醒自己一次，z-index：0 和z-index：auto不是一回事，谨记谨记
效果图：
WHY???
我最开始也觉得不科学，后来搞明白之后觉得自己大概脑子有shi。 首先我说过了，z-index为数值的时候就会产生一个层叠上下文，当我把box的值设置为0的时候就已经产生了一个层叠上下文，这时候图片就会以box产生的层叠上下文为参照，图片的z-index值为负，照样还是祭出七阶神图，那么图片就肯定是在层叠上下文的背景颜色之上了啊。
就这样吧，大家记得吃中午饭~
