The css property position with its values static, absolute, relative and fixed allows to position an element in relation to another element or the page body itself.

Using simple examples, we will see how to apply the css property position with the above values and the declarations top, bottom, left and right to position more precisely the element with units of measure or percent and their effects on the element.

To start, let us take a look at a normal flux of a page using 3 div as block elements with only a colored border:

• a yellow one
• a red one, to which I will next apply the different values of the property position
• a black one which will serve as a div container to ‘red’

The basic structure html and css style:

<div style="width:300px; height: 100px; border: 1px solid yellow;">
</div>
<div style="width:300px; height: 300px; border: 1px solid black;">
<div style="width:200px; height: 200px; border: 1px solid red;">
</div></div>

The result:

1. position: static;

The value static is the value by default as seen in the example above for the normal flux.

The ‘static’ element can not be moved from its position and ignores the declaration top, bottom, left and right.

2. position: absolute;

The value absolute allows to remove the element from the normal flux of the page to position it with the declarations top, bottom, left and right in units of measure.

The absolute element is positioned in rapport to its div container only if itself has a property position with a value different then ‘static’.

If not, the ‘absolute’ element is positioned in rapport to the html element (normally the visible area of the browser window), always in the top left corner.

Example 1 of position absolute:

‘red’ with position: absolute; top: 0; right: 50px; inside ‘black’ with no specified position.

The ‘red’ element is removed from the normal flux and positioned to the top at 50px from the right side of the browser’s window (look at the top right of this page to see it)

The result would be same if the div ‘red’ was not inside the div ‘black’, as no position has been specified for this last one and it has by default the position static.

Example 2 of position absolute:

‘red’ with position: absolute; top: 50px; left: 10px; inside ‘black’ with a position: relative;.

This time, The ‘red’ element is positioned at 50px from the top and 10px from the left side of div container ‘black’ as this last one has a relative position with the value relative.

Example 3 of position absolute:

The same as example 2 but instead of top: 50px; left: 10px;, I apply bottom: 20px; right: 10px;.

The ‘red’ element is positioned at 20px from the bottom and 10px from the right side of its container ‘black’.

3. position: relative;

The value relative allows to position an element in relation to its div container.

At the contrary of the position absolute, the declarations top, bottom, left and right do not represent fixed point of position but are based on the natural position of the element.

Example 1 of position relative:

‘red’ with position: relative; top: 20px; left: 20px; inside ‘black’.

The ‘red’ element moves itself towards the bottom and to the right adding 20px to the initial position of its left and top sides.

Example 2 of position relative:

The same as example 1 but instead of top: 20px; left: 20px;, I use bottom: 20px; right: 20px;.

The ‘red’ element moves itself towards the top and the left adding 20px to the initial position of its bottom and right sides.

4. position: fixed;

NB: NON SUPPORTED BY INTERNET EXPLORER 6 AND INFERIOR. For IE7, using the correct doctype.

Like the absolute position, the value fixed allows to remove the element from the normal flux of the page to position it with the declaration top, bottom, left, right.

The difference between the 2 of them is that a fixed element is always positioned in rapport to the element html (the visible area of the browser’s window) in the top left corner (if not specified otherwise) and never in relation to its element ‘container’.

As it is fixed, this element will always stay in its position even if the rest of the page is scrollable.

A ‘fixed’ element can be positioned using the declarations top, bottom, left, right (as for ‘absolute’) keeping in mind that it will always be in rapport to the browser’s windows.

Example 1 of position fixed:

‘red’ with position: fixed; top: 20px; left: 0; inside ‘black’.

The ‘red’ element is removed from the normal flux of the page and is positioned at 20px from the top left corner of the browser’s windows..
The result would be the same if div ‘red’ was not inside the div
‘black’, as it is always positioned based to the measure of the browser’s window.

Example 2 of position fixed:

For this second example, I remove ‘red’ with a position: fixed; bottom: 0; left: 0; from its div container ‘black’.

The basic structure html and css style:

<div style="width:300px;height:100px;border:1px solid yellow;">&lt:/div>
<div style="width:300px;height: 300px;border: 1px solid black;"></div>
<div style="width:200px; height: 200px; border: 1px solid red; position:fixed; bottom:0; left:0;">position:fixed;bottom:0;right:0;</div>

The result:

The ‘red’ element is removed from the normal flux of the page and is positioned in the bottom right corner of the browser’s windows and remains in that position even when the page is scrolled down.