<style>
body {
background-color: khaki;
font-family: Helvetica;
}
.box-before {
position: absolute;
width: 40px;
height: 40px;
color: white;
font-size: 16px;
background-color: #2f5ec2;
z-index:4;
}
.box-1 {
position: absolute;
width: 400px;
height: 100px;
padding: 10px;
color: white;
font-size: 70px;
background-color: #fd3c40;
box-sizing: border-box;
z-index:3;
}
.box-2 {
position: absolute;
height: 100px;
top: 20px;
left: 70px;
color: white;
font-size: 20px;
background-color: #8c4fb6;
z-index:2;
}
.box-3 {
position: absolute;
height: 300px;
width: 80px;
color: white;
font-size: 20px;
background-color: #00b842;
z-index:1;
}
.box-after {
position: absolute;
width: 800px;
height: 600px;
color: white;
font-size: 220px;
background-color: #faaa20;
z-index:0;
}
</style>
<body>
<div class="box-before">
blue
</div>
<div class="box-1">
red
<div class="box-2">
purple
</div>
<div class="box-3">
green
</div>
</div>
<div class="box-after">
Orange
</div>
</body>
