RELATIVE POSITION

All is relative to where its normal placement is.

Thus, any positioning (settings: top, right, bottom, left
moves the element from its default html placement. (See example two)

One
Two
Three
Four

This is coded as follows: 

<style>
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: fuchsia;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

</style>
</head>
<body>
<h3> RELATIVE POSITION</h3>
<h4> All is relative to where its normal placement is.</h4>
<p>Thus, any positioning (settings: top, right, bottom, left <br />
moves the element from its default html placement. (See example two)</p>

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

Return to Future Index