目录
z-index设置定位元素层叠顺序
z-index值相同时，写在后面的覆盖写在前面的
z-index值越大，越在上面显示
z-index值为负数
CSS中的层叠上下文
什么是“层叠上下文”
层叠上下文的创建
根层叠上下文
定位元素的传统层叠上下文
层叠顺序
当元素都处在html层堆叠上下文时：
当元素处在定位元素的层叠上下文中
确定两个元素层叠顺序的方法
z-index设置定位元素层叠顺序
定位的元素脱离了正常文档流，他相当于漂浮在文档上面。那如果有很多元素都用了定位，如何确定这些元素的漂浮顺序呢？
z-index就是用来指定“定位元素”的堆叠顺序
- z-index的默认值是0
- z-index值可以是正，也可以是负
- z-index值相同的元素，写在后面的会覆盖前面的
- z-index值越大，元素越在上面显示
- z-index只针对定位元素有效，对其他元素无效
z-index值相同时，写在后面的覆盖写在前面的
- .item1与.item2都未设置z-indedx值时，默认都为0，写在后面的会覆盖写在前面的上面
<style>.box {width: 200px;height: 200px;background-color: skyblue;position: relative;}.item {width: 100px;height: 100px;position: absolute;}/* .item1与.item2都是相对于.box绝对定位.item1与.item2在都未高设置z-index时，默认值都0，写在后面会覆盖在前面的上面 */.item1 {background-color: khaki;left: 40px;top: 40px;}.item2 {background-color: rgb(255, 192, 203, 0.8);top: 0;left: 0;}
</style>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div></div>
</body>效果：
z-index值越大，越在上面显示
<style>.box {width: 200px;height: 200px;background-color: skyblue;position: relative;}.item {width: 100px;height: 100px;position: absolute;}/* .item1与.item2都是相对于.box绝对定位.item1的z-index为3.item2的z-index为13>1，所以.item1会显示在item2的上面*/.item1 {background-color: khaki;left: 40px;top: 40px;z-index: 3;}.item2 {background-color: rgb(255, 192, 203, 0.8);top: 0;left: 0;z-index: 1;}
</style>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div></div>
</body>效果：
z-index值为负数
z-index值为负数，会显示在当前堆叠上下文中所有元素的最下面，因此这种方式也可以用来隐藏一个元素怒
<style>.box {width: 100px;height: 100px;background-color: rgba(10, 233, 181, 0.5);}.box1 {width: 200px;height: 200px;background-color: skyblue;/* 相对定位 */position: relative;margin-left: 50px;}.item {width: 100px;height: 100px;background-color: pink;/* 绝对定位 */position: absolute;z-index: -1;top: -50px;left: -30px;}
</style>
<body><!-- 正常的块级元素 --><div class="box"></div><!-- 相对定位元素 --><div class="box1"><!-- 绝对定位元素 --><div class="item"></div></div>
</body>效果：
CSS中的层叠上下文
什么是“层叠上下文”
- 每个CSS盒模型都是处在一个三维空间里面，他们分别在平面的X轴、Y轴以及表示层叠的Z轴
- 下面的三个盒子，他们分别处在X轴和Y轴，同时在Z轴上发生层叠
- 并不是所有的盒子都会在Z轴发生层叠，我们都知道默认情况下，HTML元素的页面是沿X轴和Y轴平铺
- 如下图所示，元素默认从上往下、从左往右依次排列
当引入Z轴这个概念后，“z-index的理解就变得简单许多，z-index:值就是决定这个元素在z轴的高度，高度越高就会包含高度较低的元素，从而我们只能看见z-index较高的元素”
层叠上下文的创建
层叠上下文基本上是由一些特定的CSS属性创建的
- html根元素：页面根元素天生具有层叠上下文，称之为“根层叠上下文”
- z-index的值为数值的定位元素的传统层叠上下文（z-index:auto不会创建层叠上下文）
- 其它CSS3属性
根层叠上下文
指的是页面页面根元素，滚动条的默认的始作俑者<html>元素
- 这就是为什么，绝对元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口进行定位
- 我们写在的body中的html标签，默认就是处在HTML这个根层叠上下文中，在这个层叠上下文中各元素在Z轴上有着自己的排列顺序
定位元素的传统层叠上下文
对于包含有position:relative/position:absolute的定位元素，当其z-index值不是auto的时候，会创建层叠上下文
层叠顺序
除了定位的元素会覆盖在其它元素上面之外，正常对方的盒子也会发生重叠
- “层叠顺序”英文称作“stacking order”，表示元素发生层叠时有着特定的垂直显示顺序
- 我们页面中的元素有：“块级元素”、“行内元素”、“行内块元素”、“浮动元素”、“定位元素”
当元素都处在html层堆叠上下文时：
<style>body {margin: 0;}.container {width: 400px;height: 600px;background-color: #ddd;margin: 50px;}.box {width: 300px;height: 100px;}.box1 {background-color: orchid;position: absolute;z-index: -1;top: 20px;left: 20px;}.box2 {background-color: aquamarine;margin-left: 20px;}.box3 {background-color: pink;float: left;margin-top: -50px;margin-left: 20px;}.box4 {background-color: khaki;display: inline-block;margin-left: 50px;margin-top: -50px;}.box5 {background-color: orange;position: absolute;left: 110px;top: 220px;z-index: 0;}.box6 {background-color: rgb(225, 55, 197);position: absolute;left: 90px;top: 300px;z-index: 1;}</style></head><body><div class="container"><!-- 定位 z-index:-1 --><div class="box box1">定位 z-index:-1</div><!-- 块级元素 --><div class="box box2">block块元素</div><!-- 浮动元素 --><div class="box box3">float浮动元素</div><!-- 行内块级元素 --><div class="box box4">行内块级元素</div><!-- 定位元素 z-index:0 --><div class="box box5">定位元素 z-index:0</div><!-- 定位元素 z-index:1 --><div class="box box6">定位元素 z-index:1</div></div></body>效果：
- 如果元素的等级一样，写在后面的会覆盖在前面的上面
- （指的是HTML标签的先后顺序，不是CSS样式的先后顺序）
当元素处在定位元素的层叠上下文中
- 当相对定位元素处在html层叠上下文中，设置z-index:1时，元素会在所有元素的最下面显示
- 当绝对定位元素处在定位元素的层叠上下文中，设置z-index:-1;是，元素会在当前层叠上下文元素中所有元素的最下面
| .box添加z-index:0 | .box未添加z-index:0 |
|---|---|
 |  |
确定两个元素层叠顺序的方法
- 在比较两个元素层叠顺序时，先比较他们所在的层叠上下文的层叠顺序
- 如果处在同一层叠上下文，则按同一层叠上下文中元素的排列顺序来计算
- 如果不在同一层叠上下文，则他们所在的层叠上下文的顺序决定了他们的顺序
- （即A层叠上下文要高于B层叠上下文，则A中的所有子孙元素都会高于B的子孙元素，哪怕B中元素的z-index再高也没有用）
