quick link icon

Static

The default or 'natural' position of block elements on the page.

Here the div tags are placed in the HTML one after another. They stack up in order on the page, each one beneath the previous.

For the div tags to behave this way it is usually not necessary to specify static positioning in the css.

box-1
box-2
box-3

CSS:

#box-1 {
width: 150px;
}

#box-2 {
width: 150px;
}

#box-3 {
width: 150px;
}

Relative

Relative to the placement of the element within the flow of the document.

Here the div tags are placed in the HTML one after another. Box-2 has position relative and values for top and left applied.

This has moved box-2 relative from its original placement in the layout.

Other content in the flow behaves as if box-2 is in its original position.

box-1
box-2
box-3

CSS:

#box-1 {
width: 150px;
}

#box-2 {
width: 150px;
position: relative;
left: 10px;
top: 10px;
}

#box-3 {
width: 150px;
}

Absolute

Removes the element from the flow of content and allows it to be positioned in relation to the HTML document.

Box-3 moves up to occupy the space vacated by box-2.

Absolute positioned elements will scroll with the page.

Full screen browser example

box-1
box-2
box-3

CSS:

#box-1 {
width: 150px;
}

#box-2 {
width: 150px;
position: absolute;
right: 10px;
bottom: 10px;
}

#box-3 {
width: 150px;
}

Fixed

Removes elements from the flow of the HTML and allows them to be positioned anywhere.

But, unlike absolute, the position is relative to the browser window and not the HTML document.

As a result the div becomes fixed in place, i.e. it will not move with the page when scrolling.

Click
HERE
for the
fixed
positioning
example

CSS:

#fixed {
width: 100%;
position: fixed;
top: 0px;
}