CSS – Absolute vs. Relative Positioning

Understanding relative & absolute positioning is a great advantage when designing web pages. It can offer precise control of positioned elements which can be retained cross-browser where as sometimes you can get mixed results floating items.

I use these two primarily for every header of a website as they often contain many potential elements (Logo, Tagline, Home/Contact Buttons, Search Bar, Phone Number, etc.). It is also incredibly useful in conjunction with assigning a z-index to stack elements on top of each other to work in 3 dimensions instead of 2.

On To The Good Stuff

Think of your fresh webpage as the outdoors and your holding a balloon(absolute). With nothing relative to contain it  if you let go of the balloon, it will go all the way up in the sky. Now think of your house as being positioned relative. If you step inside with your baloon(absolute) and let go, it is bound to the ceiling of your house and doesnt go further.

So every time you asign a <div> a relative value, any children <div>s inside that are assigned and absolute value are bound to the upper left coordinate of the parents relative <div> position.

When using CSS, if you create a #Header id tag to contain your elements, all you have to do is assign #Header{position:relative}, with any additional items you want such as height, color etc.

When assigning an absolute position, you will typically assign a few items by default #Header #Logo{position:absolute; top: 20px; left: 20px; width: 150px; }, lets look at this further.

Top: Assign a value to space the absolute dive from the top of the parent relative div.
Left: Position from the left of the parent relative div.
Right: Position in from the right of the parent relative div.
Bottom: Position up from the bottom of the parent div.

Visual Understanding

CSS File

#Container{width: 980px; margin: 0px auto;}
#Header{height: 120px; background: #ccc; position:relative;}
#Header #Logo{width:125px; height: 50px; position:absolute; top: 10px; left:10px; background: #999;}
#Header #Tagline{width:300px; position: absolute; top: 50px; left: 200px;}
#Header #NavButtons{width: 200px; position:absolute; top: 10px; right: 10px; text-align: right;}
#Header #SearchForm{width: 200px; height:30px; position:absolute; bottom: 10px; right: 10px; text-align: right;}

HTML File

<div id="Container">
<div id="Header">
<div id="Logo">Your Logo</div>
<div id="Tagline">Best Tagline Ever</div>
<div id="NavButtons"><a href="/">Home</a> | <a href="/contact">Contact</a></div>
<div id="SearchForm">Your Search Form Code Here</div>
</div>
</div>

As you can see it allows you to position things quite nicely. The logo stays where we want in the upper left, the tagline is controlled right where we want, and the others stick to the right where we need them. Again, notice that all the absolute positioned elements are bound in reference to the relative header div and not by the upper left of the whole page.

Additional Ideas

You may have an image that you want to have break outside of the relative parent for style, such as a cut-out person and their head extends outside of the header area for a nice look. You can assign negative values to absolute positioned items. top: 50px; Just make sure, in this instance, that you set a margin-top: 50px; on the header so that there is sufficient space to show the person and they dont run off the top of the page.