.w1
{
margin-top: 0px;
margin-left: 0px;
background-color: red;
height:400px;
width: 400px;
margin:auto;
z-index:1;
}
.w2
{
margin-top: 0px;
margin-left: 0px;
background-color: blue;
height:400px;
width:400px;
position:absolute;left:1000px;top:600px;
z-index:1;
}
.w3
{
margin-top: 0px;
margin-left: 0px;
background-color: purple;
height:400px;
width: 400px;
position: absolute; left:250px; top:100px;
}
.w4
{
margin-top: 0px;
margin-left: 0px;
background-color: blue;
height:400px;
width: 400px;
position:absolute; left:510px; top:80px;
}
.w5
{
background-color:blue;
width:1200px;
height:200px;
position:fixed; left:350px; top:350px;
color:white;
font-size:100;
text-align:center;
z-index:3;
}
.w6
{
margin-top: 0px;
margin-left: 0px;
background-color: orange;
height:400px;
width: 400px;
position: absolute; left:400px; top:300px;
z-index:2;
}
.w7
{
margin-top: 0px;
margin-left: 0px;
background-color: yellow;
height:400px;
width: 400px;
position: absolute; left:1000px; top:100px;
z-index:1;
}
.w8
{
margin-top: 0px;
margin-left: 0px;
background-color: pink;
height:400px;
width: 400px;
position: absolute; left:250px; top:600px;
z-index:1;
}
.w9
{
margin-top: 0px;
margin-left: 0px;
background-color: pink;
height:400px;
width: 400px;
position: absolute; left:700px; top:320px;
}
<html>
<head>
<link href=“styl.css" rel="stylesheet” type=“text/css”>
</head>
<body bgcolor=“green”>
<div class=“w1”>
<div class=“w2”>
</div>
<div class=“w3”>
</div>
<div class=“w4”>
</div>
<div class=“w5”>
CSS Box Model Explained!
</div>
<div class=“w6”>
</div>
<div class=“w7”>
</div>
<div class=“w8”>
</div>
<div class=“w9”>
</div>
</div>
</body>
</html>