Relative Position and Absolute Position

Many years ago when I first started learning about web design and development one of the hardest things for me to get a grasp on was positioning. When to use what and why. Hopefully by the end of this you will have a better idea, or at least a good review, of how to use relative or absolute positioning, when and why we are doing it.

Let me make it clear now, I am writing this with Firefox 3 in mind. I don’t care about IE6 and am mildly concerned with IE7+. The world of web design and development would be a much happier place if everyone would abandon IE and switch to Firefox or Chrome. That being said, on with the show.

First, lets define a few things.

Absolute Position – If you position something absolutely you’re saying, “Hey, I know I coded you in that spot but I’ve decided that you should be somewhere else completely. No matter what anyone says or does, I want you in that pixel spot.” This can be good and bad, but we’ll go into that later.

Relative Position – If you position something relatively you’re saying, “Hey, I coded you in a specific spot, but now I want to move you from that spot to another.” In other words, where ever the relative positioned item ends up on the page before styling is where the starting point will be.

WAIT! What about Fixed Position? Fixed Positioning doesn’t seem to work in all browsers. I know, I just said that I don’t care about IE6, but this isn’t just a small pixel shift, it’s the entire functionality of the attribute. Long story short, Fixed Positioning will fix the element on the page, like the old frame pages. Here is a good example of a Fixed element. I will be adding a Fixed element in each of my examples but you will have to adjust the browser window to see it work.

OH! and Static, that just means ‘default’ and should only be used if you are over-riding a preexisting style.

OK! Lets get to some examples.

Example 1 – Simple Positioning

First we’ll build a basic page, and I’ll keep it as simple of a page as possible. Some text and three boxes.

<p>Here I will put some text</p>
<div class="fixed">Fixed</div>
<div class="absolute">Absolute</div>
<div class="relative">Relative</div>

Now we’ll add a little bit of style to this page. Not much too it, just a little extra margin on our paragraph tag so you can see it with the boxes. The boxes each are 100×100 px and have a different color. They are positioned to be in the top left hand corner, the difference will be where each one thinks the top left corner is!

p{
margin-left:110px;
margin-bottom:20px;
font-weight:bold;"
}
.fixed{
position:fixed;
background:#0000FF;
top:0px;
left:0px;
width:100px;
height:100px;
}
.absolute{
position:absolute;
background:#FF0000;
top:0px;
left:0px;
width:100px;
height:100px;
}
.relative{
position:relative;
background:#00FF00;
top:0px;
left:0px;
width:100px;
height:100px;
}

Simple Positioning – Why this happens: Everything is positioned to the browser window. So our fixed and absolute should be in the top left hand corner. Our relative box should be relative to its placement in the code. So in other words, it’s coded after the text so it will position itself after the text. Absolute doesn’t care what else is on the page and will happily cover up anything in its way (that’s why I put the margin-left on the <p>). The Fixed box is hidden under the Absolute, but if you adjust the browser window and scroll down you should be able to see it.

Example 2 – Positioning in an actual website

OK, I’m not actually going to build a website, but I did create a content container box that floats in the middle of the page. I’ve changed the color of the content box so you can see it better. Again, I’m trying to make this as simple as possible.

Same code as Example 1 except I’ve added a <div> around the content.


<div id="content">
...
</div>


Alright, now we’ll add a little style to make it all work. Again, it’s the same as before but I’ve added a #content style.


#content{
width:800px;
background:#E5E5E5;
margin:0 auto;
}


Positioning in an actual website – Why this happens: The Absolute doesn’t care about our little box we’ve place all the content in, it happily put itself in the top left hand corner of the window. It doesn’t care that when you stretch your window wider, it’ll just stay right where you told it. There is where the bad comes in. If you weren’t expecting it you would be quite surprised. What is worse is you could code it and it looks fine in the browser, but someone with a different screen resolution looks at it and it breaks. The Relative on the other hand is constrained in the box but is still below the content. The Fixed box will continue doing what it does best, just sit in the corner and wait for the scroll.

Example 3 – Controlling the Absolute

So how do we control the Absolute so that it is usable? One little trick is to put a position: relative on the container box that is holding our content. This will place our Absolute in the top left of the box.


<div id="content">
<p>Some Content....</p>
<div class="fixed">Fixed</div>
<div class="absolute">Absolute</div>
<div class="relative">Relative</div>
</div>


I made another container box below with a position: absolute to show you why I didn’t pick that option. I like floating my website in the center, position: absolute would make that much more difficult.


<div id="morecontent">
<p>More Content.... </p>
<div class="absolute">Inside Absolute</div>
</div>


Again, we have the same style sheet with just a minor addition.


#content{
position:relative;
}
#morecontent{
width:800px;
background:#E5E5E5;
margin:10px auto;
position:absolute;
height:200px;
}


Example – Controlling the Absolute

Example 4 – Positioning Z-index

Now you may be asking, “why not just use a float on your simple examples?” Well, for starters, sometimes you want the text to cover your image (pretend the boxes are images) or you want the image to cover your text (no idea why). But that’s where the z-index comes into play.

I’m not going to go too in depth with z-index, but the short of it is, with your positions you can z-index something to be on top or below another item. The higher the number = the higher the layer.

I’ve changed up a few things, so I’ve re-posted all of the code.


<div id="content">
<p>Some Content...</p>
<div class="relative">Relative</div>
<p>The relative box has a z-index of 50 and should be under the text!</p>
<div class="fixed">Stupid Stupid Fixed</div>

<div class=”absolute”>Absolute on top of content</div>
</div>

And now the style, again, all of the code because I change a few things up.


#content{
width:800px;
background:#E5E5E5;
margin:0 auto;
position:relative;
}
p{
position:relative;
font-weight:bold;
z-index:75;
}
.fixed{
position:fixed;
background:#0000FF;
top:0px;
left:0px;
width:100px;
height:100px;
z-index:99;
}
.absolute{
position:absolute;
background:#FF0000;
top:0px;
left:0px;
width:100px;
height:100px;
z-index:100;
}
.relative{
position:relative;
background:#00FF00;
top:90px;
left:140px;
width:100px;
height:100px;
z-index:50;
}


Example – Positioning Z-index

Well, I hope I cleared some things up for you, or at the very least I didn’t confuse you more. If I missed anything or if you have any questions, please post it in the comments, I’m sure others have the same question but are too afraid to ask. But I’m sure together we can work out any problem.

Popularity: 3% [?]