Positioning

The four methods of setting the position property of a box are:

  • static
  • relative
  • absolute
  • fixed

 

 

Static

 

  • Default
  • Can be explicitly set { position: static; }
  • Each block starts a new line, just after end of previous block
  • Occupies full width
  • Normal flow down the page

Save & refresh browser:

 

 

 

 

 

Absolute

 

  • Positioned according to its own properties
  • Outside of normal flow
  • Effectively sits on its own layer on top of the rest of the page
  • { position:absolute; } then defined values for the top, right, bottom, left properties

Save & refresh browser:

 

 

 

Relative

 

  • Positions the box to where it would have been positioned if statically positioned
  • The remaining empty space where it would have been is still preserved
  • Mainly used as a container for absolute positioned block and floats
  • { position:relative; } then defined values for the top, right, bottom, left properties

Save & refresh browser:

 

 

 

Fixed

 

  • Doesn't move if the rest of the page scrolls
  • Positioning is offset from the edges of the viewport
  • Unrelated to other objects

Save & refresh browser:

 

 

 

Relative + Absolute

 

By applying relative positioning on a containing element, any elements within that container will be positioned relative to it.

IMPORTANT! The containing box must be relative to have the contained boxes positioned relative to it.

 

Therefore any absolute positioned elements within the container are relative to the container:

Save & refresh browser:

Leave a Reply