CSS: positioning

Positioning of elements inside a page could be quite tricky. Nevertheless, it is a powerful way of creating wonderful layout and it gives freedom and flexibility. I would like to explain everything you need to know in order to use the correct method to place your elements using CSS styles.
First of all, let me point out that there are four method for positioning:

1. static: this is the standard way of positioning; the element will be displayed following the normal flow of your page;
2. fixed: a fixed positioning will place the element in a fixed position; the element won't move even if you scroll down the page;
3. relative: with a relative positioning the element will stay relative to its normal position;
4. absolute: the element will be positioned relative to the first parent that has a position other than static; if there's not such element, will be that element.

Let's go in depth and see how they work.

Static

Almost everything in the page you're reading is static. The very words you're reading are in a static position. Static positioned elements are not affected by properties like top, bottom, left or right. Simple as that.

Fixed

Fixed positioned elements can overlap other elements (see below). Let's see an example:

This text is
fixed positioned

Can you see the red text following your scrolling?
How so? The code behind that element is:

This text is

fixed positioned

You will notice that the text will stay in the fixed position and will follow you when you scroll the page. In fact it might even be annoying!
Note that values for top, bottom, left and right properties can be either pixels or percentage.

Relative

Relative positioned elements can overlap other elements, however the space reserved for the element will be always reserved. Let's see an example:

This text is relative positioned (left=50px)

The code used is:

This text is relative positioned

As you can see the text inside the div is positioned using the left property. Now let's change that property value to -50px, and the result will be:

This text is relative positioned (left=-50px)

Wow! Now if you play around with the left, right, bottom, and top properties you will notice that you can even overlap the relative positioned element with other elements in your page.
(Now just notice how annoying is that fixed positioned element, isn't it?)

Absolute

Absolute positioning is the most tricky. The element can overlap other elements, and everything in your document will not consider the absolute positioned element, as if it didn't exist at all.
Let's try to create one:

This text is absolute positioned

Now what? You do not notice anything special in it, I know. In fact the element has only a left property set:

This text is absolute positioned

If I change it left to bottom? or top? Then you will see how it will be placed where you wanted and stick to that position. I can't do it here because it will make reading this page more difficult.

Overlapping (z-index)

When elements are overlapping, the z-index property can be set to determine the order in which elements are overlapped. The greater the z-index value the more the element will be placed in front. If no z-index value is set, the last positioned element in the normal html flow will be positioned in front.