See also: CssPositioning

Layouts

Absolute Positioning

  position: absolute;
  top: 30px; /* 30 pixels from the top of the page */
  left: 80px; /* 80 pixels from the left hand side */
  width: 100px; /* Always set a width for absolute positioned block level elements, such as divs */
  border: 1px solid red; /* So we can see what is happening */
}

The key things to note are that a width is, while not required, a very good idea, and that you can use any pair of positioning properties. You could, for example, use top: 30px and right: 10px to have an element appear in the top right hand corner of the screen. Technically you can use both a right and a left property and leave the width as auto. But unfortunately IE does not support this.

Measurements

While the example above uses pixels, it is also possible to position things using em and percentage units. These have their own advantages and disadvantages. Ems are a very useful measurement as, unlike pixels, they change their size depending on the font size the user has selected. ScalabilityIsAGoodThing, so ems should be considered whenever pixel perfect design accuracy is not required. Note however that if you are positioning things in a design that uses decorative images pixels are more or less essential, as image sizes do not change when the user scales their font.

(see UsingEms, UsingPixels)

Relative to what, exactly?

The CSS2 specification tells us that an absolute positioned element is "assigned a position with respect to a containing block". This is not particularly clear - what it actually means is that the element is positioned with respect to the "nearest" containing block that is itself positioned using either position: absolute or position: relative. This defaults to being the body or html element (depending on who you talk to), so the usual result is that the element will be positioned relative to the overall page. It does, however, introduce a very useful trick for positioning elements relative to some other element on the page...

Say for example you want to display a small question mark on the right hand side of a header somewhere, but you don't know where in the page that header will appear (this is a slightly contrived example but it will do for demonstration purposes). Consider the following:

h3 {
  position: relative; /* So that elements INSIDE this header can be positioned relative to the header */
}

h3 span {
  position: absolute;
  display: block; /* So we can give the element a width */
  top: 3px;
  right: 3px;
  width: 10px;
}

<h3>Some header <span>?</span></h3>

The position: relative on the h3 allows the span (which is inside the h3) to be positioned relative to the containing header, rather than the overall page.

This technique can produce mixed results different browsers (mainly IE), so it's a good idea to test extensively if you use it.

Using position: absolute for layouts

Using position: absolute, simple but powerful layouts of both two and three columns can be easily achieved. In fact, there is no reason to limit yourself to column layouts but since those are the most widely requested they are the ones covered here.

The key trick to creating layouts with absolute positioning is that you do not need to use position: absolute on everything. Instead, you can create space on the page by applying margins, then use absolute positioning to "fill" that space.

2 Column Layout

div#main {
  margin-left: 20%; /* Create space on the page for the menu */
}

div#menu {
  position: absolute;
  top: 1em;
  left: 1%;
  width: 17%;      /* Must be less than 20% or the menu may overlap the content */
}

<div id="main">
<p>Some Content goes here</p>
<p>content goes here</p>
<p>content goes here</p>
</div>

<div id="menu">
<p>the menu</p>
</div>

3 Column Layout

div#main {
  margin-left: 15%; /* Space for the left menu */
  margin-right: 15%; /* Space for the right menu */
}

div#menu1 {
  position: absolute;
  top: 1em;
  left: 1%;
  width: 13%;
}

div#menu2 {
  position: absolute;
  top: 1em;
  right: 1%;  /* Because top and right are defined, appears in top right */
  width: 13%;
}

<div id="main">
<p>content goes here</p>
<p>content goes here</p>
<p>content goes here</p>
</div>

<div id="menu1">
<p>the left hand menu</p>
</div>

<div id="menu2">
<p>the right hand menu</p>
</div>

Watch out for overlaps!

The single biggest potential problem with absolute positioning is that, if you aren't careful, absolute positioned elements can overlap unpositioned (or even other positioned) elements on the page. The margin technique is the most widely spread method of avoiding this, and has a very good track record.

Advantages of Absolute Positioning

Disadvantages of Absolute Positioning