CSS position Property
Example
Position an <h2> element:
h2
{
position: absolute;
left: 100px;
top: 150px;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).
| Default value: | static |
|---|---|
| Inherited: | no |
| Animatable: | no. Read about animatable |
| Version: | CSS2 |
| JavaScript syntax: | object.style.position="absolute" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
CSS Syntax
position: static|absolute|fixed|relative|initial|inherit;
Property Values
| Value | Description | Play it |
|---|---|---|
| static | Default value. Elements render in order, as they appear in the document flow | Play it » |
| absolute | The element is positioned relative to its first positioned (not static) ancestor element | Play it » |
| fixed | The element is positioned relative to the browser window | Play it » |
| relative | The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position | Play it » |
| initial | Sets this property to its default value. Read about initial | Play it » |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
How to position an element relative to its normal position:
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position:
relative;
left: 20px;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Positioning
HTML DOM reference: position property
