css:position:absolute_vs_relative_vs_static

Table of Contents

CSS - Position - Absolute vs Relative vs Static

CSS - Position - Absolute vs Relative vs Static

CSS - Position - Static

<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>

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

CSS - Position - Relative

#two {
  top: 20px;
  bottom: 20px;
  background: green;
  position: relative;
}

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

CSS - Position - Absolute

#two {
  top: 20px;
  bottom: 20px;
  background: green;
  position: absolute;
}

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.

css/position/absolute_vs_relative_vs_static.txt · Last modified: 2021/08/08 14:04 by peter