CSS/Eigenschaften/position

Browserunterstützung
caniuse.com

Die Eigenschaft position entfernt Elemente aus dem normalen Elementfluss und positioniert sie an jede beliebige Stelle (auch außerhalb) des Viewports

Erlaubte Werte

• absolute: losgelöst vom Textfluss, an eine Stelle, die per left, right, top und bottom festgelegt wird.
• fixed: starr am Viewport ausgerichtet, mit left, right, top und bottom festgelegt
• relative: Bezugspunkt für absolut positionierte Kindelemente
• static: Element verbleibt im Textfluss
• sticky: behält Position im Elementfluss, bis das obere oder untere Seitenende erreicht wird und bleibt dort „kleben“

Inline-Elemente, die position:absolute oder relative zugewiesen bekommen, werden zu Block-Elementen!

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

static

anwendbar auf

alle Elemente

Vererbung

nein

animierbar

nein

Beispiel

aside {
  position: absolute;
  right: 5em;
  top: 2em;
}

Die aside-Box wird absolut positioniert, also aus dem Elementfluss herausgenommen. Dann wird die Position mit top und right festgelegt.

Beachten Sie: Wenn Sie Elemente absolut positionieren, wird das erste Vorfahrenelement, dessen position-Wert nicht static ist, als Bezugselement genommen. Fehlt eine solche Festlegung, ist das Bezugselement das html-Element.

Siehe auch

• CSS/Tutorials/Ausrichtung/position

Weblinks

• W3C: position property
• Details: caniuse.com