1.属性特点
z-index属性是用来控制元素的堆叠顺序，z-index的值越大，元素的层级越高。当元素重叠时，层级高的会覆盖在层级低的上面，使层级低的元素的重叠部分被遮盖住。
2.取值范围
z-index属性的值分为三种：auto（默认值）：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0、number：整数数值，在兼容所有浏览器的取值范围是 -2147483584 \~ 2147483584，数值越大，层级越高，数值越小，层级越低、inherit：继承父元素的z-index的属性值。
3.适用范围
z-index属性只能在设置了position: relative \| absolute \| fixed的元素和父元素设置了 display: flex属性的子元素中起作用，在其他元素中是不作用的。
4.从父属性
当父元素设置了z-index属性时，子元素的z-index属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的z-index属性值为准进行对比，子元素本身的z-index属性值无效。
当父元素未设置了z-index属性，子元素的z-index属性与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以元素本身的z-index属性值为准进行对比
5.举例说明
1.普通例子
<!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>
.box1 {
width: 200px;
height: 200px;
background: #f00;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
.box2 {
width: 400px;
height: 400px;
background: rgb(0, 255, 123);
position: absolute;
left: 50px;
top: 50px;
/*定层 */
z-index: 1;
}
.box3 {
width: 600px;
height: 600px;
background: rgb(55, 0, 255);
position: absolute;
left: 100px;
top: 100px;
/*定层 */
z-index: 3;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<!-- 场景：改变定位元素的层级
属性名：z-index
属性值：数字
数字越大，层级越高 -->
这个例子很简单，很容易看出，z-index的取值越大，层级越高（层级高的覆盖层级低的）。
2.从父例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.father1 {
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 2;
}
.father2 {
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: -30px;
left: 30px;
z-index: 1;
}
.son1 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 110px;
top: 143px;
z-index: 1;
}
.son2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 51px;
top: 7px;
z-index: 6;
}
</style>
<body>
<div class="father1">
<div class="son1"></div>
</div>
<div class="father2">
<div class="son2"></div>
</div>
</body>
</html>
从这个例子可以看出它的从父属性
当父元素设置了z-index属性时，即认为设置了一个结界，父元素里面的子元素z-index只跟自己结界内有关，结界内子元素比较遵循以下原则：
1、子元素无论是否设置z-index或者设置值比父元素小，层级一定都在父元素之上。所以例子里的蓝在红的上面，黄在绿的上面。因为两个父级元素中红大于绿，所以红在绿上面。所以总体排序为蓝，红，黄，绿。（这个例子懂了，从父属性就懂了）
2、子元素的z-index属性只与结界内元素对比有意义，如子元素未设置z-index则视为0。结界外的元素只会与父元素z-index比较，根据层级大小整体覆盖在父元素的上面或整体垫底在父元素的下面，不会参与结界内部z-index排序。
3、当父元素未设置z-index属性，不会生成结界，默认父元素z-index=0，父元素会参与子元素的z-index排序。
4、相同的z-index值比较，元素书写顺序在后面的层级高于前面的。
原文链接: https://blog.csdn.net/2302_78593467/article/details/135970772