CSS - Position Relative & Absolute

<!DOCTYPE html>
<html>
<head>
<style>
body {
  position: relative;
  top: 50px;
}

div.relative {
    position: relative;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    border: 3px solid blue;
    top: 10px;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:</p>

<div class="relative">
This div element has position: relative;

 <div class="absolute">
  This div element has position: absolute;
 </div>

</div>

<div class="absolute">
This div element has position: absolute;
</div>

</body>
</html>