position

Übersicht

Die position Eigenschaft legt die Positionsart eines Elements fest. Für die Positionierung selbst werden die Eigenschaften top, right, bottom oder left verwendet.

Ein positioniertes Element ist ein Element für das absolute, fixed oder relative als position definiert wurde.
Ein absolut positioniertes Element ist ein Element für das absolute oder fixed als position definiert wurde.

  • Standardwert static
  • Anwendbar auf Alle Elemente
  • Vererbt Nein
  • Prozentwerte
  • Medium visuell
  • Berechneter Wert siehe Spezifikation
  • Animierbar Nein
  • Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

position: static | relative | absolute | sticky | fixed

Werte

static
Standardwert. Das Element ist normalen Fluss. Die Eigenschaften top, right, bottom oder left haben keine Auswirkungen.
relative
Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird. Bei table-*-group, table-row, table-column, table-cell, und table-caption Elementen ist kein Effekt definiert.
absolute
Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.
sticky
Eine Mischung zwischen fixed und relative: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, solange es sich innerhalb des Viewports befindet. Sobald es sich ausserhalb befindet, wird das Element aus dem normalen Fluss gelöst und bleibt so beim Scrollen an seiner fest definierten Position.
fixed
Die Verschiebung orientiert sich am Viewport. Das Element wird aus dem normalen Fluss gelöst und bleibt auch beim Scrollen an seiner fest definierten Position. Beim Drucken wird das Element auf jeder Seite an der positionierten Stelle angezeigt.
inherit
Der Wert des Elternelements wird geerbt.

Beispiele

Das folgende Beispiel verdeutlicht den Unterschied zwischen position: absolute und position: fixed. Während das absolut positionierte Element beim Scrollen mitwandert, bleibt das mit fixed positionierte Element fest an seiner Position.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Position absolute und fixed</title>
<style type="text/css">
p {font-size:30px; line-height:3em;}
div.pos {width:49%; text-align:center; border:2px solid #00f;}
div#abs {position:absolute; bottom:0; left:0;}
div#fix {position:fixed; bottom:0; right:0;}
</style>
</head>
<body>
  <p>This<br>is<br>some<br>tall,<br>tall,
    <br>tall,<br>tall,<br>tall<br>content.</p>
  <div id="fix" class="pos"><p>Fixed</p></div>
  <div id="abs" class="pos"><p>Absolute</p></div>
</body>
</html>

Spezifikation

Spezifikation Status Anmerkung
CSS Level 2 (Revision 1) Recommendation  
CSS Positioned Layout Module Level 3 Working Draft sticky hinzugefügt

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) (See notes) 4.0 4.0 1.0 (85)
fixed 1.0 1.0 (1.0) 7.0 4.0 1.0 (85)
sticky ? Nightly build (Bug 916315) ? ? 6.1 -webkit-
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1.0) (See notes) ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter:
Mitwirkende an dieser Seite: facial, SJW, Michael2402, fscholz
Zuletzt aktualisiert von: SJW,
Seitenleiste ausblenden