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.

Initialwert	`static`
Anwendbar auf	alle Elemente
Vererbt	Nein
Medien	visuell
Berechneter Wert	wie angegeben
Animierbar	Nein
Kanonische Reihenfolge	die eindeutige Reihenfolge definiert durch die formale Grammatik
Erstellt Stapelkontext	Ja

Syntax

static | relative | absolute | sticky | fixed

Werte

static: Standardwert. Das Element ist im 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" 
   "https://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) Die Definition von 'position' in dieser Spezifikation.	Empfehlung
CSS Positioned Layout Module Level 3	Arbeitsentwurf	`sticky` hinzugefügt

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`	?	32 (32.0)	?	?	6.1 -webkit-

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	1.0 (1.0) (See notes)	?	?	?

Siehe auch

top, left, bottom, right