CSS Positioning Overview

The four values of position property

The only thing I want you to learn from this post is how different positioning values behave, the article is meant to be technical-agnostic. Enjoy!

#1 AUTO (STATIC)

A position auto (static) element follows the document flow (from top to bottom).

Auto (static) positioned elements

#2 RELATIVE

A position relative element is NOT removed from the document flow and can move around it’s original position.
A position relative element can partially overlap nearby elements.

Relative positioning of an element

#3 ABSOLUTE

A position absolute element is removed from the document flow and can move freely inside it’s relative-positioned parent.

Absolute positioning an element

#4 FIXED

A position fixed element is removed from the document flow and can move freely within the boundaries of the viewport.

Fixed positioning an element

Pictures are captured from this video: Positioning Overview Intro

If you want I can integrate this post with technicalities and/or snippets of code, in case leave a comment below.

Have a good day!