CSS z-index属性层重叠顺序

作者:WangMin

格言:努力做好自己喜欢的每一件事

对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须遮住另一个。但是如何控制哪个元素放在上层，这就出现了z-index这个属性。

z-index属性的含义

一个元素在文档中的层叠顺序，用于确认元素在当前层叠上下文中的层叠级别。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

• z-index的属性值越高越靠前。
• 元素可拥有负的 z-index 属性值。
• z-index 跟具体数字。
• z-index的数值不跟单位。
  
  
  
  如上图所示，这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高z-index值的元素比较低z-index值的元素离用户更近，也就是说较高z-index值的元素最先呈现在用户的视野，这会导致较高z-index值的元素覆盖其他元素，这也称为堆叠或叠放。

z-index 属性使用条件

z-index 在设置了position属性（position不为static的元素）的元素条件下使用。通常我们让不同的对象盒子以不同顺序重叠排列，我们就要使用 z-index 样式属性。

接下来从最简单的不使用z-index的情况开始学习z-index 属性。

z-index应用案例

1）对于同级元素

层叠级别大的显示在上面，级别小的显示在下面，也就是z-index属性值越大的元素在z-index属性值小的元素上面；层叠级别中的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。代码如下：

<div class="box">box
	<div class="same one">one</div>
	<div class="same two">two</div>
</div>

.box{
	width:350px;
	height:350px;
	color: #fff;
	background:brown;
	position: relative;
}
.box>.same{
	width:250px;
	height:250px;
	position: absolute;
}
.box>.one{
	background:burlywood;
	top:30px;
	left:30px;
}
.box>.two{
	background:palegoldenrod;
	top:60px;
	left: 60px;
}

情况一：

在还没有给设置了 position: absolute; 属性的元素 .one 和元素 .two 设置 z-index 属性的情况下：



从上图可以看出元素 .two 覆盖在元素 .one 上面，这是因为依据它们在HTML文档流中的顺序，写在后面的元素将会覆盖前面的元素。

情况二：

如果我们想要元素 .two 覆盖在元素 .one 下面，就要给 .one 设置z-index属性，情况如下：



在这里可能就有小伙伴发现我并没有给元素 .two 设置z-index属性，元素 .two 为什么会覆盖在元素 .one 下面。以下我来说明以下原因：

1. IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。
2. z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。

以上我们可以得出结论：在这里元素 .two 的z-index的属性值为auto不与元素 .one 的z-index的属性值进行比较，而元素 .one 的z-index的属性值在HTML文档流中最高，所以元素 .two 覆盖在元素 .one 下面。

情况三：

如果我们给元素 .two 也加上 z-index:1; ？结果得到元素 .two 覆盖在元素 .one 上面。那是因为：一旦z-index值相等，情况就和都不设置z-index值一样了。

情况四：

1. 在父元素 .box 添加 z-index:10，在元素 .two和元素 .one 添加 z-index:2;， 这样理论上父元素就会在上面（父元素 .box覆盖元素 .two和元素 .one），但是实际情况跟情况一的效果是一样的，结果没有变! 如下：
   
   
2. 把两个子元素的z-index值同时设置为-2；父元素不设置z-index属性。结果如下：

从上图我们只看到父元素 .box，并不是元素 .two和元素 .one不见了，而是被父元素 .box遮住了。 这说明在父元素和子元素之间还是可以作比较的！！！只是需要我们把子元素的z-index值设为负数。

2） 对于不同级元素

元素的显示顺序依据父级元素的层叠级别（z-index值）来决定，与自身的层叠级别（z-index值）无关。

有两个div盒子，元素 .two和元素 .one在元素.box1 里，元素.three 在元素 .box2 里

<div class="box box2">box
	<div class="same one">one</div>
	<div class="same two">two</div>
</div>
<div class="box box2">box
	<div class="same three">three</div>
</div>

元素.box1和元素 .box2设置z-index，那么（元素.box1和元素 .box2）的子元素 (元素 .two、元素 .one、元素.three ）以父元素的层叠关系为主。

.box{
	width:350px;
	height:350px;
	color: #fff;
	position: relative;
}
.box1{
	z-index: 1;
}
.box2{
	z-index: 2;
}
.box>.same{
	width:250px;
	height:250px;
	position: absolute;
}
.box>.one{
	background:burlywood;
}
.box>.two{
	background:palegoldenrod;
	top:40px;
	left: 40px;
	z-index: 20;
}
.box>.three{
	background:palegreen;
	top: -100px;
	left: 80px;
}

元素 .two、元素 .one、元素.three处于不同的div中，不管子元素中是否设置了z-index属性，子元素的层级关系都根据父级的z-index大小来确定，也就是说子元素的层级关系与它们自身的z-index属性值无关。例子中，元素.box1的z-index值（z-index: 1;）小于元素 .box2的z-index值（z-index: 2;），所以元素.three在元素 .two的上面，如下图所示：

z-index的一些理解误区

一般我们会说：z-index属性只有和定位元素（position不为static的元素）一起使用的时候，才起作用，那首先这种说法是错误的，因为在css3中flex盒子的子元素也可以设置z-index属性。

---

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 后续继续更新!!