ngahine

What are the differences between relative, absolute, and fixed positioning?

CSS positioning types:

  • Static (default)
  • Relative
  • Absolute
  • Fixed

Static positioning is the default setting of elements on a page.

Relative positioning is when you want to move an element from its static position.

Relative positioning is not commonly used for top, right, left, bottom positioning as it moves your element out of the document flow (it does not remove it) and if there are other child elements they do not follow.

Parent
child1
child2
child3

The only time you may use relative position is when you are wanting a child element to move absolutely relative to the parent element.

To do this the parent has to be in relative position and the child in absolute position.

Absolute positioning is similar to relative positioning except it completely removes itself from the document flow and everything else will move into it's position like it doesn't exist.

Parent2
kid1
kid2
kid3

This is a fixed position

A fixed position is where a element can remain fixed in the same place as you are scrolling through a page.

See the Pen Relative position by Ngahine Wakefield (@ngaswakefield) on CodePen.