Skip to main content

CSS Positioning

Published on 14th May 2013

Last week I had to explain CSS positioning to someone who is starting out learning HTML & CSS. It's a tricky subject to get your head around first time, so I wrote a blog post covering the four methods of CSS positioning.

Static

This is the default position for all HTML elements. This means the element is positioned according to the normal flow of the page. You wouldn't need to specify this unless overriding a previous style.

.box {
 position: static;
}

view demo


Relative

Using position: relative; allows you to use top, right, bottom and left CSS properties.

You can move the element relative to where it would normally be in the document's flow. There a couple of things to remember:-

  1. Relatively positioned elements can overlap other elements.
  2. Relatively positioned elements still occupy the original space even if you have moved it using top, right, bottom and left CSS properties.

The main use for relatively positioned elements are as container blocks for setting absolutely positioned elements within.

.box {
 position: relative;
}

view demo


Absolute

When an element is set to position: absolute; it's completely removed from the documents flow. You can position it exactly where you want it to go using top, right, bottom and left CSS properties.

There a few things to remember:-

  1. The documents page flow and other elements behave like the absolutely positioned element is not even there.
  2. Absolutely positioned elements can overlap other elements.
  3. The absolutely positioned element is positioned relative to the first parent element which has a position other than static. If no element is found the element is the containing block.
.box {
 position: absolute;
}

view demo


Fixed

You use the position: fixed property when you want to keep an element in same position on the page even if the user scrolls the page.

There a few things to remember:-

  1. The documents page flow and other elements behave like the fixed positioned element is not even there.
  2. Fixed positioned elements can overlap other elements.
  3. Fixed position elements are always relative to the browser viewport (you can't override this by adding position: relative; to a parent element).
.box {
 position: fixed;
}

view demo