CSS position property

Definition and Usage

The 'position' attribute specifies the type of positioning for an element.

Description

This property defines the positioning mechanism used to establish the element layout. Any element can be positioned, but absolute or fixed elements will generate a block-level box regardless of the type of the element itself. Relatively positioned elements will offset from their default position in the normal flow.

See Also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:Position Property

Example

Position the h2 element:

h2
  {
  position:absolute;
  left:100px;
  top:150px;

Try It Yourself

CSS Syntax

position: static|absolute|fixed|relative|sticky|initial|inherit;

Property Value

Value Description
absolute

Generates an absolutely positioned element, positioning it relative to the first parent element other than static positioning.

The position of an element is defined by the "left", "top", "right", and "bottom" properties.
fixed

Generates an absolutely positioned element, positioning it relative to the browser window.

The position of an element is defined by the "left", "top", "right", and "bottom" properties.
relative

Generates a relatively positioned element, positioning it relative to its normal position.

Therefore, "left:20" adds 20 pixels to the LEFT position of the element.
static Default Value. Without positioning, the element appears in the normal flow (ignores top, bottom, left, right, or z-index declarations).
inherit Specifies that the position property should inherit its value from the parent element.

Technical Details

Default Value: static
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.position="absolute"

Try It Yourself Example

Position: Relative positioning
This example demonstrates how to position an element relative to its normal position.
Position: Absolute positioning
This example demonstrates how to use absolute values to position an element.
Position: Fixed positioning
This example demonstrates how to position an element relative to the browser window.
Set the shape of an element
This example demonstrates how to set the shape of an element. This element is clipped to this shape and displayed.
Z-index
Z-index can be used to place an element after another element.
Z-index
The Z-index of the element in the above example has been changed.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0