CSS Positioning

Posted on by

Last update : November 24, 2014

The layout properties available in CSS are :

  • position : static
  • position : relative
  • position : absolute
  • position : fixed
  • float : left or float : right

The default CSS positioning for all elements is position:static; the element is not positioned and occurs where it normally would in the document. With position:relative, elements are moved relative to where it would normally occur in the document with the parameters top, bottom, right or left. With position:absolute, the element is removed from the document and placed exactly where the parameters top, bottom, right or left tell it to go.

A combination of a relative and absolute positionned div’s allows to make a two-column layout. An advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. A disadvantage is that other elements are obscured by the absolutely positioned elements. This can be avoided if a fixed height is set on the absolute positionned elements, but if the text displayed in this element is longer or the font size is changed, new problems appear. A better solution for variable height columns is to float an element to push it as far as possible to the right or to the left, and allow text to wrap around it. Two elements floated to the same side will push up against each other. To push down the rest of the content the floats can be cleared after the floating elements.

Position:fixed behaves like position:absolute, but it will position an element in reference to the browser window as opposed to the web page. Fixed elements should stay exactly where they are on the screen even when the page is scrolled.

There is a divide between web designers saying you should use absolute positioning and web designers saying you should use floats, both claiming that the other method breaks faster. Both are right, it depends on the situation. There is a simple rule :

If elements should not interact, use absolute positioning, if they should, use floats.

Another benefit of floats is the progressive downloading; as the text is loaded it is displayed onto the page immediately.

Links to examples of layouts with different positionned elements are listed hereafter ( look at the sourcecode of the webpages to view the CSS code) :

Links to some useful tutorials about CSS positioning are shown in the following list :