Atrybut position w CSS

Definicja i użycie

Atrysta pozycji określa typ lokalizacji elementu.

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. Relative positioning elements will be offset from their default position in the normal flow.

See also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:Position property

Example

Position 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

Generate 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

Generate 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

Generate an element with relative positioning, positioning it relative to its default position in the normal flow.

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 Specify 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"

Przykład TIY

Umieszczenie: umieszczenie względne
Ten przykład pokazuje, jak umieścić element w stosunku do jego normalnej pozycji.
Umieszczenie: umieszczenie absolutne
Ten przykład pokazuje, jak używać wartości absolutnych do umieszczenia elementu.
Umieszczenie: umieszczenie stałe
Ten przykład pokazuje, jak umieścić element w stosunku do okna przeglądarki.
Ustawienie kształtu elementu
Ten przykład pokazuje, jak ustawić kształt elementu. Ten element został przycięty do tego kształtu i wyświetlony.
Z-index
Z-index można użyć do umieszczenia jednego elementu za innym.
Z-index
Element w przykładzie zmienił wartość Z-index.

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

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