CSS position Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The position CSS property specifies how an element is positioned.
The following table summarizes the usages context and the version history of this property.
| Default value: | static |
|---|---|
| Applies to: | All elements |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | CSS 2, 3 |
Tip: Elements with a position other than static are said to be positioned. Their vertical placement in the stacking context is determined by the z-index property.
Syntax
The syntax of the property is given with:
The example below shows the position property in action.
Example
Try this code »h1 {
position: absolute;
top: 100px;
left: 150px;
}Note: In the case of print media type, the box is rendered on every page, and is fixed with respect to the page box, even if the page is seen through a viewport (in the case of a 'print-preview' — for example).
Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
static |
The element's box is a normal box, laid out according to the normal flow. The top, right, bottom, left, and z-index properties are ignored for static boxes. This is default value. |
relative |
The element is positioned relative to its normal position (this is called the position in normal flow). |
absolute |
The element is positioned relative to its first ancestor element whose position value is other than static. |
fixed |
The element is fixed with respect to the screen's viewport and doesn't move when scrolled. When printing, the element is printed on every page. |
sticky |
The element is positioned similarly to a relatively positioned box and it "sticks" to its nearest ancestor that has a "scrolling mechanism". |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element position property. |
Browser Compatibility
The position property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS Position, CSS Layers.
