Member-only story

Difference between css position absolute versus relative

3 min readJan 9, 2017

I spent sometime understanding the difference between absolute positioning and relative positioning. It was a confusing topic to me and I decide to illustrate their differences with pictures.

Before going further, we should know the default behaviour of position when we don’t specify any position property.

position: static

By default, position an element based on its current position in the flow. The top, right, bottom, left and z-index properties do not apply. — source MDN

`position: relative`

Position an element based on its current position without changing layout.

`position: absolute`

Position an element based on its closest positioned ancestor position.

Take an example

To start with, create a parent container with 4 boxes side by side.

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>

style.css

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

Live code: JsBin

By default, position is set to static. It positions based on the layout in the flow.

What happens when we want to move the GreenBox but do not want to affect the layout around it?

This is where position relative comes in. Move 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.

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