CSS Position Relative

<!DOCTYPE html>
<html>
 <head>
   <style>
    .default {
     background-color: lightblue;
     border:solid;
    }
    .css_position_relative_top {
     border: 2px dashed blue;
     position:relative;
     top: 20px;
     padding:10px;
     background-color:tomato;
    }
    .css_position_relative_right {
     border: 2px dotted green;
     position:relative;
     right: 25px;
     padding-left:30px;  
     background-color:lightgreen;
    }
    .css_position_relative_bottom {
     border: 2px double black;
     bottom: 1.5em;
     position:relative;
     padding:5px;  
     background-color:yellow;
    }
    .css_position_relative_left {
     border: 2px ridge brown;
     position:relative;
     left: -18px;
     padding-left:30px;  
     background-color:orange;
    }
    .css_position_relative_mix {
     border: 2px ridge brown;
     position:relative;
     top:12px;
     left: 15px;
     padding:5px;  
     background-color:aqua;
    }
   </style>
 </head>
 <body>
   <div class="default">
     <p> This div is the default position</p>
   </div>
   <div class="css_position_relative_top">
     <p><strong>This moves the div 20px away from top relative to default position so
	 this will shift the div towards the bottom of the page relative to its default
	 position</strong></p>
     <br>
   </div>
   <div class="css_position_relative_right">
     <p><strong>It moves the div 25px away from right relative to default position so
	 this will shift the div towards left of the page relative to its default position
	 </strong></p>
     <br>
   </div>
   <div class="css_position_relative_bottom">
     <p><strong>Here it moves the div 1.5em away from bottom relative to default so
	 this will shift the div towards the top of the page relative to its default
	 position position</strong></p>
     <br>
   </div>
   <div class="css_position_relative_left">
     <p><strong>moves the div -18px away from left relative to default so this will
	 shift the div towards left(because of negative px value) of the page relative to
	 its default position position</strong></p>
     <br>
   </div>
   <div class="css_position_relative_mix">
     <p><strong>This moves the div 12px away from top relative to the default position
    	 and 15 px away from left relative to a default position. The div will be 
		 shifted towards bottom-right.</strong></p>
     <br>
   </div>
 </body>
</html>