Positioning - The Kama Sutra of CSS

Chris Hirst's Avatar
Written by Chris Hirst. Posted in Website Development and Design on 10 February 2012.
Hot 4244 hits 0 favoured

Position is the most overused and least understood of all CSS concepts. In essence it is quite simple, it allows you to specify where elements will appear in a HTML document when it is rendered by a visual user agent ie: a web browser.
  It is however a little more than that, as it also allows a developer to set which elements are allowed to overlap others in the third dimension of a HTML document, the stacking order (z-index), and how elements should behave if the  parent container is reduced in size by user action and becomes too small for the child elements to follow the normal flow..

The position property has five possible values that can be applied. These are: absolute | fixed | relative | static | inherit. At the time of writing all current browsers support these property values although IE8 requires a doctype to support "inherit".
  Position is not a 'inheritable' property so child elements of a positioned parent will take the default value of 'static' not the position property of the parent.

position: inherit;

 This value simply means that the element it is applied to will have the same position value that is applied to the parent element.

position: static;

This is the default value. If this value, or no value is set for the position property,  the element will follow the normal document flow.

position: relative;

The general misconception is that position: relative means that elements are set relative to other elements, this is NOT the case, elements that are positioned relative behave exactly as a static element would unless the positional properties of top | right | left | bottom are applied, then the element will display relative to it's normal (static) position.

N.B. This means that the element will still occupy it's normal position but the contents will appear at the offset co-ordinates and overlap elements that are lower in the stacking order with elements that are higher in the stacking order  overlapping the displayed contents.

See examples of relative positioning  for a demonstration.


position: absolute;

Absolute positioning removes the element it is applied to from the document flow so it does not affect sibling elements and sibling elements do not affect the absolute positioned element.
      Absolute positioned elements behave differently depending on the position value of the parent. If the value is anything other than static the absolute child element will take up a position with respect to (relative to) the top left, inside edge of the parent.
If the immediate parent element is position: static the element will take it's position from the first positioned (non-static) ancestor, if no positioned ancestor exists the top left corner of the body will be used as the reference point, but ONLY if a value is given to one of the offset properties, if no offset is given it will remain located from the top left inside edges of the parent.

This ancestral referencing  also extends to the  width and height of a block element that is positioned absolutely.
In a non-static parent and when sizes are given in percentage units, the width and height will be a percentage of the parent container, if the parent is static, the sizes will be a percentage of the closest positioned ancestor or if no positioned ancestor is found the width or height of the body will be used.

See examples of absolute positioning for a demonstration

position: fixed;

Fixed positioning is similar to  absolute positioning insofar as it removes the element from the document flow  and the element will be set with respect to top left corner of the viewport  it will however remain in the same position while the rest of the content scrolls.

In the case of a positioned parent the element  will also use the parent elements content area as an offset to it's final location.

See examples of fixed positioning for a demonstration

Chris Hirst's Avatar

Author: Chris Hirst

36 0 0
Powered by CjBlog