Η ιδιότητα CSS position

Ορισμός και χρήση

Η ιδιότητα position καθορίζει τον τύπο τοποθέτησης του στοιχείου.

Explain

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. Relative positioning 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;

Attribute Value

Value Description
absolute

Generates an element with absolute positioning, positioning it relative to the first parent element other than static positioning.

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

Generates an element with absolute positioning, positioning it relative to the browser window.

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

Generates an element with relative positioning, 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 attribute value should be inherited from the parent element.

Technical Details

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

TIY Example

Position: Relative Position
This example demonstrates how to position an element relative to its normal position.
Position: Absolute Position
This example demonstrates how to use absolute values to position an element.
Position: Fixed Position
This example demonstrates how to position an element relative to the browser window.
Set the shape of the 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