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
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.
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.
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.
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.