Various Positions

The position attribute can take a range of values, each value affecting how an element is positioned on the page. The possible values and their meanings are described below

Static

This is the kind of positioning that is used by default, if you do not specify an alternative. In this case the position of an element in the page is determined by the position of its coding in the HTML document.

If we want to explicity specify that static positioning should be used, the style rule could be:

#staticPosition {
    position: static;
}

An element with static positioning ignores any values for the top, left, right or bottom attributes.

This example page shows a paragraph with static position. Look at the page layout and then read the source.

Relative

An element with this kind of positioning may be moved relative to its normal (static) position by specifying values for one or more of the attributes top, left, right or bottom. In that case, the top (or other edge) of the element is moved by the specified amount relative to its normal position.

Using a style rule, we might have something like the following:

#relativePosition {
    position: relative;
    top: 80px;
    left: 20px;
}

This would position any element it was applied to 80 pixels below and 20 pixels to the left of its static position. This is demonstrated on this example page. Look at the page layout and then read the source. Notice how a gap appears in the page layout at the static position of the element. Try different values for the top and left attributes. Try using the bottom or right attributes instead.

This example shows a slightly more complex example of a div with relative positioning inside another div. Try moving its position around the window.

Absolute

The name "absolute" is slightly confusing because an element with absolute position is actually positioned relative to its first parent element with a position other than static! As with the use of the float style, the element itself is removed from the normal flow of the page.

#absolutePosition {
    position: absolute;
    top: 80px;
    left: 20px;
}
    

Some examples will (hopefully) help make this clearer!

This first example shows an absolutely positioned paragraph in a page.

This example shows an absolutely positioned div within a relatively positioned container. The use of one div to act as a container for a number of other elements is a common technique in page design.

As for the relative position examples, try different values for the top and left attributes. Try using the bottom or right attributes instead. Notice how the top, left, bottom and right attributes work differently with absolute position as compared with relative position.

Fixed

Finally, an element with a fixed position is positioned relative to the browser window. This means that if the page scrolls, the fixed element does not move.

#fixedPosition {
    position: fixed;
    top: 80px;
    left: 20px;
} 

This example page shows the effect!

This example shows a fixed element combined with a long single column div.

By combining divs with different position properties it is possible to make very flexible page layouts! Remind yourself of the possibilities by looking at these examples again. Read the style rules defined in the different style sheets and see which elements in the page each rule applies to. You should be able to understand these layouts completely now.

Back Return to the main CSS Position page.