CSS: Position Property
The position
property lets you:
- Adjust position of elements.
- Make elements into a separate layer.
The position
property has 4 possible values:
position Value | Own Layer | Relative To |
---|---|---|
static | no | (Normal Flow) This is default. |
relative | no | Relative to its normal position |
fixed | yes | Relative to window |
absolute | yes | Relative to its containing block. That is, the first parent that's not positioned static . If none found, then it's
Root Element. |
To specify the offset, use one of the following:
top:length
bottom:length
and one of:
left:length
right:length
Example:
div.x89647 { position:fixed; top: 1px; left: 1px; }
position:static
The position:static
is the default for all elements.
The position of element of position:static
is either below the previous element, or to the right of the previous element.
If the previous element is a block element, then next element is positioned below it. (block elements are div
, p
, img
, h1
etc.)
If the previous element is a inline element, then next element is positioned to the right of it (or below if container box width is reached). (inline elements are span
, a
(link), b
(bold), etc.)
position:relative
Use position:relative
to adjust a element's position relative to its normal position.
position:fixed
Use position:fixed
to specify the positioning of a element with respect to the window.
When a element has position:fixed
, that element goes into its own layer.
The normal flow of elements will flow as if that element doesn't exist.
See: CSS: Fix Element to Window
position:absolute
position:absolute
make the element go into its own layer.
position:absolute
's offset is relative to its “containing block”.
A “containing block” is effectively the first parent element that has a position value other than “static”. When no parent has any of “position” spec, then it is relative to the <html>
element.
Example:
Overlapping and z-index
When a element goes into a layer, it may overlap with other elements. To control which goes on top, you can use the attribute
z-index
. Like this:
z-index:3
[see CSS: z-index]
Layer Example
For practical examples of using layers, see:
CSS Layout
- Display Property
- Pure CSS Table
- CSS: 3-Column Side-Panels Layout
- CSS: Newspaper Multi-Column Layout
- CSS: Text Flow Around Image
- Hide Element (visibility)
CSS Layers
- Position Property
- Fix Element to Window
- Position: Relative
- Absolute Position
Text Over Image- z-index