CSS Tutorials - CSS Position Property

The "Position" property belonging to CSS yields wonderful and varied results when combined with elements. Here are some examples.

Absolute Position

These are absolutely positioned boxes using different combinations of values for the top, right, bottom and left properties. These boxes will keep their position and not resize with the browser window. The results could be unpredictable.

This is RED
This is GREEN
This is BLUE
This is YELLOW
This is CYAN

Static Position

This is a "static" positioning of these 100 x 100 pixel elements. It is the browser default to align block level elements underneath each other.

This is RED
This is GREEN
This is BLUE
This is YELLOW
This is CYAN

Relative Position

These are relatively positioned boxes using different combinations of values for the top, right, bottom and left properties. The elements are offset from their parent element's edge to create a box effect.

This is RED
This is GREEN
This is BLUE
This is YELLOW
This is CYAN

Fixed Position

Fixed Width Box is relative to browser.

This is a fixed position box. Like an absolutely positioned box, it keeps its absolute position on the screen. The difference is that a fixed box is relative to the browser window and will keep its position relative to the user's browser even by scrolling up and down the web page.