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.
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.
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.
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
