<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
/* z-index: 0; 只有定位的div才会有*/
}
.red{
z-index: 1;/* 默认为0,取值越大,定位的元素在层叠中越靠上 */
}
.blue{
left: 50px;
top: 10px;
background-color: blue;
z-index: 3;
}
.green{
left: 100px;
top: 10px;
background-color: green;
z-index: 2;
}
</style>
</head>
<body> <!-- z-index叠放次序 -->
<div class="red"></div><!-- 后来者居上 -->
<div class="blue"></div>
<div class="green"></div>
</body>
</html>