CSS Position Absolute

<!DOCTYPE html>
<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>