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:20" 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


Examples

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



Color Picker

colorpicker