CSS positioning properties

With CSS positioning properties, you can specify where and how elements should be positioned.

This tutorial focuses on:

Positioning elements
Stacking elements

Positioning elements

The position of an element is set with the position property.

Possible values for the position property:

static - The element will have its default position given to it by the normal flow of a webpage.
relative - The element will be moved from its default position based on specification and will be displayed as such.
absolute - The element will be displayed at a set of specified coordinates relative to the block in which it is contained.
fixed - The element will be displayed at a set of specified coordinates relative to the browser window.

NOTE: The position property is often used together with some other properties!

Properties used together with the position property:

left - Sets the left coordinate of an element.
right - Sets the right coordinate of an element.
top - Sets the top coordinate of an element.
bottom - Sets the bottom coordinate of an element.

Example:

<html> <head> <style type="text/css"> p.two {position: absolute; left: 20; top: 40;} h2 {position: relative; right: 40;bottom: 60;} </style> <title>Positioning elements</title> </head> <body> <p>This paragraph has a default position.</p> <p class="two">This paragraph has an absolute position. </p> <h4>This heading has a relative position.</h4> </body> </html>

Output:

This paragraph has a default position.

This paragraph has an absolute position 20 pixels from the left and 40 pixels from the top relative to its containg block.

This heading has a relative position that is 40 pixels from the right and 60 pixels from the bottom relative to its default position.

Stacking elements

Elements are stacked using the z-index property. By stacking elements, you can specify which elements will appear in front of other elements. Elements have a z-index of 0 by default.

Example:

<html> <head> <style type="text/css"> img {position:absolute; left:0px; top:0px; z-index:-1;} </style> </head> <body> <img src="/images/apple.jpg" width="100" height="180"> <p> This paragraph will appear stacked on top of the image because it has a higher <b>z-index</b>. The <b>z-index</b> of this paragraph is 0, while the <b>z-index</b> of the image is -1. </p> </body> </html>

Output:

The z-index of the paragraph is 0 (by default). The z-index of the image is -1. The paragraph will appear stacked on top of the image because it has a higher z-index.