看了网上很多的博客，将了关于这个层叠上下本的技术博客，
然后我也自己去整理了下，我这篇关css元素的堆叠顺序
写的很清楚，很有条理，很简单明了，层叠上下文的法则都总结好了，希望对大家有帮助
这个属于扩展，当然你想了解技术的话，可以看看我这个关于堆叠顺序的理解！
不了解的话，当然有更加简单方法是完成堆叠上下本的方法！
当然这是我自然的理解，有说的不对的地方，希望你们可以指出来！大家一起交流学习，一起进步
堆叠(层叠)(栈)上下文(stack context)
它是一个区域,这个区域由某个元素去创建,它规定了这个区域中的内容
在Z轴上排列的先后顺序。
1. html元素(根元素)
2. 设置了z-index数值的定位元素(非auto)
3. 一定是定位元素，也就是需要你去设置这个position属性
4. 当然你也可以去mdn官方文档查看 层叠上下本 哪些元素可以去创建上下本
## 同一个堆叠上下文中元素在Z轴上的排
从后到前的排列顺序,也就是出现靠底层
显示层次顺序
1. 创建堆叠上下文的元素的背景跟边框
2. 堆叠级别(z-index)为负值的堆叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto 的定位子元素
7. 堆叠级别为正值的堆叠上下文
---->>>每个堆叠上下文,独立于其他的堆叠上下文,它们之间不能相互穿插。
你可以理解就是 把每个元素创建的堆叠上下文 看成一个整体。
你可以通过调整每个盒子的margin-top属性的值,依次完成或者去理清楚这个覆盖的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单个堆叠上下本</title>
<style>
/* 第1个级别 背景跟边框 */
html{
/* 本身html也会创建堆叠上下文 */
background: lightblue;
}
/* 第6个级别 就是z-index 为默认值 auto 或者为0
很显然 这个效果是在最前面的
*/
.container{
background: #008c8c;
width: 200px;
height: 200px;
position: relative;
/* 创建堆叠上下文 */
/* z-index: -1; */
/* 要是这个z-index是auto的话,这个div就不会创建堆叠上下文 */
margin: 50px;
}
/* 第2个级别 就是z-index为负数 */
.item{
width: 100px;
height: 100px;
background: red;
position: relative;
z-index: -1;
/* z-index: 设置的值为多少,都是无法在父元素的下面 */
float: left;
left: -30px;
top: -30px;
}
/* 第3个级别 常规流非定位块盒 */
.nomal{
/* 通过浏览器F12去修改margin-top值 动态修改,可以看到效果*/
width: 200px;
height: 200px;
background: chocolate;
margin-top: -200px;
}
/* 第4个级别 非定位浮动盒子 */
.float{
width: 200px;
height: 300px;
background: brown;
margin-top: -390px;
/* 这个效果最佳 */
float: left;
margin-left: 40px;
}
/* 第5个级别 常规流非定位行盒 */
/* 需要注意的就是我们可以看到这个 级别四已经 */
span{
background: lightyellow;
}
/* 第7个级别 很显然 把堆叠级别z-index设置为正值的堆叠上下文, 显然出现在最上面
前提条件就是这个 这个元素会形成堆叠上下文, 不然你去设置堆叠上下文是没有效果的
*/
</style>
</head>
<body>
<!-- 第三个 + 第五个级别-->
<!--因为p元素是常规流非定位块盒 第三个级别 然后
这些文字其实是写在span里面的 也是就 常规流非定位行盒
最后效果也就是很明显,为什么 级别四的背景覆盖了级别三<p>元素的背景
但是没有覆盖这个 文字的颜色 就是因为文字隐式默认装在<span>里面 (匿名行盒)
以上的解释也就是很清楚解释网页呈现的效果了
-->
<p style="background: lightyellow;">
Lorem ipsum dolor sit amet consectetur, adipisic
</p>
<!-- 第五个级别 -->
<span style="background: lightyellow;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus, illo?
</span>
<div class="container">
<div class="item">
</div>
</div>
<div class="nomal">
<!-- 常规流盒子非定位 -->
</div>
<div class="float">
<!-- 非定位浮动盒 -->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
background: lightblue;
}
.c1{
position: relative;
z-index: 0;
background: #008c8c;
width: 200px;
height: 200px;
}
.c2{
position: absolute;
width: 200px;
height: 200px;
z-index: -1;
background:chocolate;
left: 100px;
top: 100px;
}
.item1,.item2{
position: absolute;
height: 100px;
width: 100px;
}
.item1{
right: -50px;
bottom: -50px;
}
</style>
</head>
<body>
<!-- c1 c2 盒子都会形成堆叠上下本 它们都是在html根元素里面进行层叠
所以先把它们两看成两个整体,它们内部的子元素所形成的上下文 暂时不看
c2的盒子z-index为负,比c1更靠前！根据
-->
<!-- 第二个问题
凭什么c1的item1中的红色可以去覆盖这个c2的红色
规则就是要看整体,你看第一个红色是在c1上下文里面
第二个红色在c2形成的层叠上下文里面
所以他们子元素都是以整体来说的,你可以认为他们不可分割
这样子就能去解释为什么c1红色去覆盖c2红色了！
-->
<!-- 第三个问题
假设我设置item2,让它也形成一个上下文,
那么item1与item2它们之间的顺序如何
其实它们两都在c1形成的层叠上下文里面,
所以它们两根据单独的堆叠上下本就可以分辨
-->
<div class="c1">
<div class="item1 " style="background: red;">红色</div>
<div class="item2"></div>
</div>
<div class="c2">
<div class="item1" style="background: rgb(204, 11, 11); ">红色</div>
<div class="item2"></div>
</div>
</body>
</html>
以上的例子，希望大家对z-index属性有更加深入的理解，这个原理明白了，以后完成两张图片叠加
或者说是这样子叠加，层叠的效果，就信手捏来！
~~有问题的，或者哪里说得不对了，希望大家指出来~~