<html>
<head>
<style>
.box2 {
position: static;
background: powderblue;
background: orange;
width: 700px;
height: 20px
}
.main-box1 {
position: relative;
background: green;
width: 600px;
height: 200px
}
.absolute_position1 {
position: absolute;
top:50px; /*This will move 50px away from top from the parent element. */
background: yellow;
width: 500px;
height: 100px;
}
.static_position1 {
position: static;
background: aqua;
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div class="box2">
This is a default div
</div>
<br>
<div class="main-box1">
<div class="absolute_position1">Absolute position - This div is
relative to its parent div "main-box1" so it will move
<strong>50px</strong> away from the top side of its parent
div(main-box1) so this div will shift down by 50px.</div>
<div class="static_position1">static position - This div is a static
Div and is created inside the parent div "main-box1" so it will be
static inside the parent div.</div>
</div>
</body>
</html>