position

The position property specifies exactly where you want to put a tag; you can move any tag from where it would normally appear on the page and put it somewhere else. There are three possible values: absolute, relative, fixed and static. The default is static.

When a browser displays a tag, it puts it in an invisible box (back to the box model). Each box has a content area (text, a picture and so on) and optional surrounding padding, border and margin areas. You can use the position property together with the top, bottom, left and right properties to:

Set the box's distance from the top and left edge of the page (absolute positioning)
Set the box's distance from the top and left edge of the browser window (fixed positioning). The tag does not move when you scroll so it might cover up other tags
Offset the box against other tags on the page (relative positioning)

You can also specify the height and the width of the box.

If you set the position to absolute, the tag appears exactly where you specify in the page. You must also set the position with the top and left properties.

For example, to put the <h1> element 150 pixels from the top of the page and in a box 200 x 200 pixels:

h1 { position: absolute; top: 150px; 
     width: 200px; height: 200px;}

You can use this in conjunction with the <div> and <span> tags or inline styles to apply the positioning to specific instances of a tag.

If you set the position to fixed, the tag appears exactly where you specify in the browser window. You must also set the position with the top and left properties.

For example, to put the <h1> element 150 pixels from the top of the widow and in a box 200 x 200 pixels:

h1 { position: absolute; top: 150px; 
     width: 200px; height: 200px;}

You can use this in conjunction with the <div> and <span> tags or inline styles to apply the positioning to specific instances of a tag.

If you set the position to relative and enter the co-ordinates, the tag appears relative to the previous tag. For example:

The second paragraph has a position of relative with top set to 50 pixels and left to 25 pixels.

Things to note about positioning:

The other tags don’t shift to make room so tags can overlap
If you position a tag relatively, the space that the tag normally takes up stays where it is so you can get a gap. This does not apply to any tags that you position absolutely
If you position a tag absolutely, it loses its margins

The default position of any element is static; this means that you cannot change the position.