<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>z-index叠放次序</title>
<style>
div {
width: 200px;
height: 200px;
background-color:pink;
position: fixed;
/* z-index:0; 这是默认的 ，只有定位的盒子才有 */
}
.red {
z-index: 3;
/* 不加单位，默认为0，层级越大，层级越靠前 */
}
.blue {
background-color:blue;
top:50px;
left:50px;
z-index: 4;
}
.green {
background-color: green;
top:100px;
left:100px;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
效果图如下：