Follow me on Twitter

In an ideal world, we shouldn't need absolute positioning for anything, but sometimes relative positions don't get us any closer to solving some design issues or have unexpected results in different browsers.

During the olden days of web design when many designs were justified left of the browser, so using absolute positions was an exercise in no-brainery: simply position all elements to a top and left coordinate. This worked because the top and left position of the browser is constant, even if the user resizes it.

But on a design that is centred in the browser, top and left are no longer constant (due to varying browser widths) and absolute positions aren't as common, but they can be your saviour as long as you make the right preparations.

How it works

In the example below, I have a 150px x 100px div with positioning set to absolute, and coordinates set to 15 and 15.

<div id="menu">
<div>

#menu {
  position: absolute;
  width: 150px;
  height: 100px;
  top: 15px;
  left: 15px;
  border:solid 1px red;
}

The important thing to understand here is that the coordinates need to be relative (remember this term) to something in order to work. Most people describe it as being relative to the browser - because that's what it physically looks like - but in reality it's relative to the element it's contained in (remember that too - I'll come back to it), which happens to be the body.

Realising this little fact should reveal a clue. Give up? This means that you can use absolute positioning and make it relative to the elements it's contained in, as long as the containing element has a position set to relative. Check this out:

#header {
   position: relative;
   width: 300px;
   height:100px;
   margin: 0 auto;
   border:solid 1px blue;
}  
 #menu {
   position: absolute;
   width: 150px;
   height: 100px;
   top: 15px;
   left: 15px;
   border:solid 1px red;
}

With the containing element (#header) assigned a relative position, the menu will now be positioned absolute to that element. This means that no matter where you move #header (even if you centre it in the browser), #menu will position itself top 15 pixels and left 15pixels of where ever #header is, not where the body is.

You can start to see how this could solve certain design issues, and as long as you don't use it for absolutely (sorry) everything, it can be your best friend.

Comments

Replying to comment article

FYI: You are currently not logged in. It's cool though - you can still comment. But only members get a profile page, access to the download section and they can pimp their own web sites. Feel free to register or Login now!

Your name:

Your comments:

Note: HTML tags are automatically stripped from comments.

Are you human?

Sorry, I have to ask. So what sort of animal is this? (Hint: you don't have to be perfectly specific)

Back to top