基本作用
z-index 属性设置元素的堆叠顺序，也就是在元素Z轴上的层级。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。但是注意的是该属性只有在设置了positon定位之后才会生效。
规则
同级下，z-index的值越大，堆叠顺序越靠前，相同的z-index值的时候，后面的会在前面的层级之上。z-index的值是可以设置0和负数的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
#a {
position: absolute;
z-index: 1;
background-color: red;
}
#b {
position: absolute;
top: 50px;
z-index: 1;
background-color: blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
2.
同级指的是同一个堆叠上下文，当给z-index设置值的时候就会创建堆叠上下文，不同的堆叠上下文看最外层的z-index值。具体来说如果a的z-index比b的z-index小，那么a元素里面的其他元素无论设置多大的值也无法覆盖b里面的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
#a {
position: absolute;
z-index: 10;
background-color: red;
}
#a-1 {
position: absolute;
left: 50px;
z-index: 1000;
background-color: yellow;
}
#b {
position: absolute;
top: 50px;
z-index: 11;
background-color: blue;
}
#b-1 {
position: absolute;
left: 50px;
z-index: 0;
background-color: black;
}
</style>
</head>
<body>
<div id="a">
<div id="a-1"></div>
</div>
<div id="b">
<div id="b-1"></div>
</div>
</body>
</html>
3.
z-index:0 和 z-index:auto 的区别
当一个定位元素不设置z-index的时候，默认值就是auto,下面来看一个很有意思的例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
#a {
position: absolute;
z-index: 0;
background-color: red;
}
#a-1 {
position: absolute;
left: 50px;
z-index: 2;
background-color: yellow;
}
#b {
position: absolute;
top: 50px;
z-index: 1;
background-color: blue;
}
#b-1 {
position: absolute;
left: 50px;
z-index: 10;
background-color: black;
}
</style>
</head>
<body>
<div id="a">
<div id="a-1"></div>
</div>
<div id="b">
<div id="b-1"></div>
</div>
</body>
</html>
该场景下，因为a的层级比b低，所以a-1依然无法覆盖b-1,但如果把a的z-index删掉确可以覆盖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
#a {
position: absolute;
/* z-index: 0; */
background-color: red;
}
#a-1 {
position: absolute;
left: 50px;
z-index: 2;
background-color: yellow;
}
#b {
position: absolute;
top: 50px;
z-index: 1;
background-color: blue;
}
#b-1 {
position: absolute;
left: 50px;
z-index: 10;
background-color: black;
}
</style>
</head>
<body>
<div id="a">
<div id="a-1"></div>
</div>
<div id="b">
<div id="b-1"></div>
</div>
</body>
</html>
在此时，因为a元素没有设置z-index，所以没有创建堆叠上下文，此时a-1和b是同一级的，因此可以覆盖，哪怕b-1的z-index比a-1的z-index值大，依然如此。
再教大家一个小技巧，如何让父子关系的元素，子元素在父元素后面？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
#a {
position: absolute;
z-index: 0;
background-color: red;
}
#a-1 {
position: absolute;
left: 50px;
z-index: -10;
background-color: yellow;
}
/* #b {
position: absolute;
top: 50px;
z-index: 1;
background-color: blue;
}
#b-1 {
position: absolute;
left: 50px;
z-index: 10;
background-color: black;
} */
</style>
</head>
<body>
<div id="a">
<div id="a-1"></div>
</div>
<div id="b">
<div id="b-1"></div>
</div>
</body>
</html>
正常情况下即使设置了子元素的z-index为负值，依然无法实现这个效果，其实这里只要将a元素的z-index设置为auto，即可实现上述效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
}
#a {
position: absolute;
/* z-index: 0; */
background-color: red;
}
#a-1 {
position: absolute;
left: 50px;
z-index: -10;
background-color: yellow;
}
/* #b {
position: absolute;
top: 50px;
z-index: 1;
background-color: blue;
}
#b-1 {
position: absolute;
left: 50px;
z-index: 10;
background-color: black;
} */
</style>
</head>
<body>
<div id="a">
<div id="a-1"></div>
</div>
<div id="b">
<div id="b-1"></div>
</div>
</body>
</html>
总结
虽然CSS3出了flex,grid等属性来让我们前端更方便的布局，但是定位目前来看依然非常重要，在复杂的页面布局中，深入的了解z-index的基本原理可以让我们更好的处理使用了position的页面布局。
