Absolute positions are absolutely your friend

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.

absolute

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.

Who is That Web Guy?

Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, occasional judge for the Australian Web Awards (2011, 2012, 2013) and creator of Task Rocket.

9 Responses to Absolute positions are absolutely your friend

  1. Josh says:

    Another useful lesson mike, this will come in handy down the road. Thanks!

  2. Jeff Chapman says:

    Hmmm… Still not sure why position: relative wouldn’t work just as well in this situation.

  3. Branigan says:

    I just put that to the test by wrapping one of my old absolute positioned designs in a div with margin:0 auto; with 960px; and it worked. Pretty neat.

  4. CSS Babe says:

    Absolutely useful :-) Thanks again.

  5. That Web Guy says:

    Glad to know it – you’re welcome Josh.

  6. Jasmine says:

    It’s all very clear to me now. You are the man Web Guy.

  7. Luke says:

    Thank you, thank you, thank you! I cannot thank you enough for this useful tidbit! I always thought that the absolute positioning was relative to the body, not the tag that it is in… BRILLIANT!

  8. Pete says:

    Hi Mikey,

    I finally got around to focusing on my site that broke in IE, deciding to focus on versions 7 and above.

    After reading your article here it dawned on me that I had “loose” html elements (elements outside any of the site containers) that in IE were being read as relative to the body, not the containers in the site. All the standards compliant browsers handled this without issues but in IE these elements separated as the browser window expanded or contracted.

    The solution was to add a simple “wrap” right after the body tag and set it to relative. From that IE could tell the elements what to position themselves to I’m guessing.

    Anyway, it works. I haven’t checked it on IE6 but I’m thinking not to worry about that.

    Thank you for the reference to this article on Twitter, it was the trigger that I needed.

    Regards,

    Pete

    Twitter: @pychap

  9. That Web Guy says:

    Excellent Pete! Glad it worked out for you.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


− four = 2

BTT