Relative and Absolute Positioning

Back to FAQ Home | Back to Tutorial Home

 

Step 1 - Static Positioning

Step 2 - Relative Positioning

Step 3 - Absolute Positioning

Step 4- Fixed Positioning

In this tutorial we are going to explore relative and absolute positioning as this does seem to cause a lot of confusion among web designers. As with the other tutorials I will not be including hacks for older browsers as that will complicate the issue at this stage and also spoil the cleanliness of the code. I will leave it up to you to research the "bugs and workarounds" required for older or non compliant browsers. The main thing is to understand how the code is supposed to work in compliant browsers.

1) Static

When you lay out an element on a page and you do not specify it's position (e.g. position:absolute) then the element is laid out as part of the normal flow of the document. That is it will be placed after any preceding elements and other elements will follow it, as long as all these elements have no position defined other than static which is the default.

Static is the initial value of the position property and is used by default, which means that it doesn't need to be declared. e.g. position;static is the same as if you hadn't entered anything at all. Static content will flow around any floated elements. Also any attempt to position a static element with values for left and top will be ignored for obvious reasons (i.e. static element positions are governed by the normal flow of the document and not by positioning with values. You can of course position the element away from other static elements by using margin-left , margin-right, margin-top or margin-bottom).

A lot of users confuse static with fixed but we will explain that later.

Ok, time for an example. Copy the code below into your editor and view the web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Static Position - example 01</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css" media="screen">
<!--
.box1 {
background-color: #CCCCCC;
height: 100px;
width: 300px;
}
-->
</style>
</head>
<body>
<div class="box1">
This element is positioned with static (i.e. it is in the normal flow of the document).
</div>
</body>
</html>

Lets look at the page so far.

As you can see all this code does is to put a box on the screen with a width and height of 300px x 100px and I have also coloured the background to make it easier to see. (Note: It is good practice to always specify a foreground colour when specifying a back-ground colour.)

This box is positioned in the normal flow of the document (i.e. static). As the box is the first item on the page it is displayed in the top left hand corner (allowing for any default body margins etc). Try entering some text before the element so that you are sure of what happens. When you have finished playing around reset the code back to normal (as above).

Now to show you that adding position;static to the style will not make any difference because it is already static, add the following (the bold part only) to the style declaration in the above code.

.box1 {
background-color: #CCCCCC;
color: #000000;
height: 100px;
width: 300px;
position: static;
}

You notice that nothing has changed. Now add some positioning values which should also make no difference.

.box1 {
background-color: #CCCCCC;
color: #000000;
height: 100px;
width: 300px;
position: static;
left: 300px;
top: 200px;

}

Add some text before the box element as follows (i.e. the bold text).

<div>
<p>Preceding text</p>
</div>

<div class="box1">
This element is positioned with static (i.e. it is in the normal flow of the document).
</div>

Try your page out again to see what it looks like and notice that the positioning values you have entered have no effect and the box is positioned in the normal flow of the document, after the text you have entered.

So now we can say for sure that the position property default is static and that positioning values have no effect on the element.

Next we move on to Relative Positioning.

Back to Top


Relative Positioning

2) Relative

Relative positioning is putting the element in the normal flow of the document and then offsetting it by some distance using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.

Copy the following code and add it to your style sheet:

.box2 {
background-color: #CCCCCC;
color: #000000;
height: 100px;
width: 300px;
position: relative;
left: 20px;
top: 20px;
}

Now add the bold part of this code into the body section of your page.

 

<div class="box1">
This element is positioned with static (i.e. it is in the normal flow of the document).
</div>
<div class="box2">
This element is positioned with relative (i.e. it is offset from its position in the normal flow of the document).
</div>
<div>
Following text
</div>

We have created another box (box2) with same dimensions as box1 so that we can compare the two. The left and top positions have been set to 20px each which should move the element 20 px to the left and 20px down from where it would have been in the normal flow of the document. I have also added some following text so that we can see what happens to other elements in the document.

Have a look to see this in effect.

The first thing you will notice is that the element has been moved 20px left and 20px down as expected, however this means that the element is now overlapping the text that follows underneath. You must take this into consideration when placing positioning values on your elements. Obviously as mentioned above this may be the effect you require.

To see one further effect of using positioning change the values of left and top in box2 to 200px each.

i.e.

.box2 {
background-color: #CCCCCC;
color: #000000;
height: 100px;
width: 300px;
position: relative;
left: 200px;
top: 200px;

}

Once again the element box2 has moved by the required amount as expected, however the space that the element would have occupied has also been preserved. This is another aspect to take into account with this type of positioning. Check the page and see.

So there are three main things to remember with relative positioning:

1) The element is positioned relative to where it would usually be in the normal flow of the document.

2) The space that the element occupies in the normal flow is preserved, which may mean that you are left with a gap if the element is positioned a long way away.

3) The element may overlap other elements on the page.

Next we move on to Absolute Positioning.

 

Back to Top


Absolute Positioning

3)Absolute

Ok now copy the code below on to the end of your style sheet.

.box3 {
background-color: #FFFFCC;
color: #000000;
height: 130px;
width: 300px;
position: absolute;
left: 200px;
top: 200px;
}

Now add this mark up into the body of your page.

<div class="box3">
<p>This element is positioned with absolute (i.e. it is absolutely positioned from its containing block and
removed from the normal flow of the document).</p>
<p> position: absolute; left: 200px; top: 200px; </p>
</div>

Before we discuss the topic any further just have a look at the page now.

You will notice that this new element is positioned absolutely 200px from the left of the window and 200px from the top of the window. This means that the element may well overlap or totally obscure other elements on the page. It is up to you to decide whether this is the effect you require and also use the z-index to decide which element should be on top.

Basically the z-index determines the order of stacking on the page for overlapping elements. The lower the z-index (i,e, z-index:1) the further away the element will appear in the stacking order. This is also dependent upon nesting as nested elements will appear above or below other elements depending on the z-index of their parent elements. Anyway we won't get to involved with z-indexes at the minute (I'll save that for another tutorial).

So now we know that an absolutely positioned element is removed from the normal flow of the document and placed precisely at the co-ordinates specified.

But what is the element absolutely positioned from? It is positioned absolutely from the top left hand corner of its containing block (i.e. its parent). The containing block of the positioned element is the nearest ancestor element which has a value for the property position other than static. If there is no ancestor then the containing block is the root element , which is the html element outside of all margins set on the body.

So what this boils down to is that an element will be absolutely positioned from the top left of the viewport unless it is nested in another element that has a value for the property position other than static. e.g. position:relative or position:absolute. In these cases the element will position itself the specified amount from the top left of its parent elements.

It might be easier to explain this with an example. Copy the code below into your style sheet:

.box4 {
color: #000000;
background-color: #99CCFF;
height: 500px;
width: 500px;
}

Now amend the code in your body to this (i.e. add the bold parts).

<div class="box4">
<div class="box3">
<p>This element is positioned with absolute (i.e. it is absolutely positioned from its containing block and
removed from the normal flow of the document).</p>
<p> position: absolute; left: 200px; top: 200px;<br />
</p>
</div>
</div>

Lets have a look at the page:

As you can see Nothings Happened! Our original absolutely positioned box is still in the same place as it was before and it is not inside (or positioned in relation to) the new blue box (box4).

OK add the bold part to your style sheet:

.box4 {
color: #000000;
background-color: #99CCFF;
height: 500px;
width: 500px;
position:relative;
}

We have specified position relative but we haven't provided any co-ordinates! This doesn't matter and is quite a useful technique as the box will remain in the normal flow of the document (i.e. no offset) but now we can use it as a target to position our absolute box from.

Have a look at the page now .

As you can see the yellow box (box3) is now positioned absolutely from the top left of the blue box (box4). So by adding position relative to box4 we have changed the absolute positioning of box3. The same effect would be achieved if we changed box4 to position : absolute, but of course (in both cases relative and absolute) any co-ordinates entered in box4 would place box4 in a different position and box3 would also be carried with it.

As a side issue you will notice that box2 has disappeared. It hasn't disappeared it is just hidden underneath box4. To make it re-appear you will need to adjust the z-indexes accordingly (i'll leave that up to you to play with).

Nearly finished Now! We just briefly need to discus Fixed positioning.

Back to Top


Fixed Positioning

4) Fixed

Fixed Positioning is the same as absolute positioning except that the containing block is always the viewport. It doesn't matter if the element is nested in another element that has position properties set as discussed above, the element will always be positioned the specified co-ordinates from the top left of the viewport (the browser window) regardless.

However unlike absolute positioning a fixed positioned element will not scroll with the document and will always appear in the same place similar to using frames. At the moment IE6 doesn't support fixed positioning so you will need to use a compliant browser such as Mozilla 1.2 to see the effect in the following code.

Change the box3 style as indicated in bold below.

.box3 {
background-color: #FFFFCC;
height: 130px;
width: 300px;
position: fixed;
left: 200px;
top: 200px;
color: #000000;
}

Now look at the page using Mozilla 1.2 (or some other browser that supports fixed positioning). Scroll the page and you will see that box3 stays in the same position all the time even though other elements scroll up and down around it.

If you check the page in a non compliant browser you will notice that the element is not positioned at all and just remains in the normal flow of the document. It's a shame that the position:fixed isn't widely accepted by browsers as it could offer an alternative to sites designed with frames.

One thing to note is that IE6 does understand the fixed position when applied to a background image applied to the body. (However it does not recognize it for other elements.)

That's about it for this tutorial, I hope that it's given you a better understanding of the various position values that you can use when laying out your designs.

If you have any questions or comments to offer about these tutorials then you can leave a message on my contacts page at www.pmob.co.uk

 

Back to Top


Valid XHTML 1.0! Valid CSS!

Paul O'Brien www.pmob.co.uk