CSSposition Property
Example
Position an <h2> element:
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Try it Yourself »position: absolute;
left: 100px;
top: 150px;
}
More "Try it Yourself" examples below.
Definition and Usage
Theposition property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).
| Default value: | static |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| 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 |
Note: Thesticky value is not supported in Edge 15 and earlier versions.
CSS Syntax
position: static|absolute|fixed|relative|sticky|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| 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 » |
| sticky | The element is positioned based on the user's scroll position A sticky element toggles between | Try it » |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
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 »position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
Example
More positioning:
#parent1 {
position: static;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child1 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent2 {
position: relative;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child2 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
Try it Yourself »position: static;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child1 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent2 {
position: relative;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child2 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
Related Pages
CSS tutorial:CSS Positioning
HTML DOM reference:position property
