Absolute positions are absolutely your friend

Written July 25, 2009. 9 comments.

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.

Start of page

9 Responses to Absolute positions are absolutely your friend

Skip the comments

1. Josh says:

   July 26, 2009 at 12:02 am

   	
   		Another useful lesson mike, this will come in handy down the road. Thanks!		
2. Jeff Chapman says:

   July 26, 2009 at 12:42 am

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

   July 27, 2009 at 5:25 am

   	
   		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:

   July 27, 2009 at 10:26 am

   	
   		Absolutely useful :-) Thanks again.		
5. That Web Guy says:

   July 27, 2009 at 10:59 am

   	
   		Glad to know it – you’re welcome Josh.		
6. Jasmine says:

   July 27, 2009 at 1:11 pm

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

   September 1, 2009 at 1:37 pm

   	
   		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:

   September 2, 2009 at 11:58 pm

   	
   		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:

   September 3, 2009 at 5:44 am

   	
   		Excellent Pete! Glad it worked out for you.