[Simanto]

When you're going to use CSS positioning, the first thing you need to do is use the CSS property position to tell the browser if you're going to use absolute or relative positioning.

What most people don't realize when they're using CSS to lay out Web pages is that there are actually four states to the position property:

* static
* absolute
* relative
* fixed

Static is the default position for any element on a Web page. If you don't define the position, it will be static and will display on the screen based on where it is in the HTML document and how it would display inside the normal flow of the document.

If you apply positioning rules like top or left to an element that has a static position, those rules will be ignored.
Absolute CSS Positioning

Absolute positioning is the easiest to understand. You start with the CSS position property:

position: absolute;

This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document - it won't affect how the elements before it or after it in the HTML are positioned on the Web page.

If you want to position an element 10ems from the top of the document window, you would use the "top" offset to position it there with absolute positioning:

position: absolute;
top: 10em;

This element will then always display 10em from the top of the page - no matter what else displays there in normal flow.

The four positioning properties are:

* top
* right
* bottom
* left

To use them, you need to think of them as offset properties. In other words, an element positioned right 2em is not moved right 2em. It's right side is offset from the right side of the window 2em. The same is true for the other three.
Relative Positioning

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.

For example, if you have three paragraphs on your Web page, and the third has a position: relative style placed on it, it's position will be offset based on it's current location - not from the original sides of the view port.

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p style="position: relative;left: 2em;">Paragraph 3.</p>

In the above example, the third paragraph will be positioned 3em from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute; anything following it would display on top of it, because it would no longer be in the normal flow of the document.
What About Fixed Positioning?

Fixed positioning is a lot like absolute positioning. The position of the element is calculated in the same way as the absolute model - from the sides of the view port. But fixed elements are then fixed in that location, like a watermark. Everything else on the page will then scroll past that element.

position: fixed;

Keep in mind, when you fix an element in place on your site, it will print in that location when your Web page is printed out. For example, if your element is fixed at the top of your page, it will appear at the top of every printed page - because it's fixed to the top of the page. You can use media types to change how the printed pages display fixed elements:

@media screen {
h1#first { position: fixed; }
}
@media print {
h1#first { position: static; }
}

[neilp]

Cheers for that! Even though I've got a good understanding of positioning, it's still a good read and no doubt be a good resource for someone just beginning their studies.

Thinking about it though....it would be nice to have a similar thread on the concepts of the "Document flow" and "The box model" as not everyone knows what the normal flow of the document is. I know i didn't!
I think then positioning can be explained a bit better or easier.

Good read though...

[ystoredesign]

good information

[silvers]

nice stuff. thanks for your efforts. i thought i had before, but you made me realise a few things. i appreciate that

[Wickham]

It's a good, clear, basic summary of the four positions, but of course there are exceptions to the basic rules.

As stated, position: absolute elements are normally taken out of the normal flow and take their top, right, bottom and left positions from the viewport. However, if the position: absolute elements are inside an element with position: relative, they take their positions from the corners of the position: relative element, not the viewport (screen).

This can be very useful if the main containing div (wrapper) for the page is centered in any resolution so that it has different but equal width side spaces in different resolutions, then position: absolute elements inside move with it, maintaining their absolute positions inside. So a page wrapper can have static or relative elements following the normal flow of the code and also position: absolute divs which take no notice of the other elements, but still maintain position within the wrapper which "moves" to center.

IE6 does not process position: fixed elements; they will normally be processed as position: absolute. Remember that if you place a position: fixed element at a height or width outside some browser resolutions, you can't scroll to see it and it will never be seen; for instance a top: 650px position: fixed element will never be seen in a browser with a screen resolution of 800*600 although you may think it's OK when looking at it in your browser with a resolution of 1024*768.

[skidz]

Thanks... Was good to re read about positioning as I generally float everything... A good revision session there

[Pedro]

Important, when using absolute/relative positioning in your css, make sure you mention either top or bottom AND left or right.

If you just mention top, for example, then you can have a misalignment on IE.

So if you just want to mention top, also add, left: 0; to your see statement.