====== CSS - Position - Absolute vs Relative vs Static ======

===== CSS - Position - Static =====

<file index.html>
<div class=”parent”>
 <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>
</div>
</file>

<file style.css>
.parent {
 border: 2px black dotted;
 display: inline-block;
}
.box {
 display: inline-block;
 background: red;
 width: 100px;
 height: 100px;
}
#two {
  background: green;
}
</file>

{{:css:position:css_-_position_-_static.png?600|}}

----

===== CSS - Position - Relative =====

<file style.css>
#two {
  top: 20px;
  bottom: 20px;
  background: green;
  position: relative;
}
</file>

{{:css:position:css_-_position_-_relative.png?600|}}

<WRAP info>
**NOTE:**  Relative Position places an element relative to its current position.

  * Moves the green box relative to its current position to 20px from the left and top without changing the layout around it.
  * Thus, leaving a gap for the green box where it would have been had it not been position

</WRAP>

----

===== CSS - Position - Absolute =====

<file style.css>
#two {
  top: 20px;
  bottom: 20px;
  background: green;
  position: absolute;
}
</file>

{{:css:position:css_-_position_-_absolute.png?600|}}

<WRAP info>
**NOTE:**  Absolute Position has the offset relative to the parent.

  * It will not leave any gap where it would have been.
  * The position of the Green Box is based on its parent position (the dotted border).
  * Thus, moving 20px to the left and bottom from the top-left origin of the dotted border.
</WRAP>