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.

Initialwertstatic
Anwendbar aufalle Elemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik
Erstellt StapelkontextJa

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" 
   "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)
Die Definition von 'position' in dieser Spezifikation.
Empfehlung  
CSS Positioned Layout Module Level 3 Arbeitsentwurf sticky hinzugefügt

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
positionChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).
Hinweise Before Firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).
IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).
Hinweise Before Firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).
Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
Absolutely-positioned flex childrenChrome Vollständige Unterstützung 52Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 52IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 39Safari Vollständige Unterstützung 11WebView Android Vollständige Unterstützung 52Chrome Android Vollständige Unterstützung 52Firefox Android Vollständige Unterstützung 52Opera Android Vollständige Unterstützung 41Safari iOS Vollständige Unterstützung 11Samsung Internet Android Vollständige Unterstützung 6.0
fixedChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Before Firefox 44, position: fixed didn't create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari's long-time behavior.
IE Vollständige Unterstützung 7
Hinweise
Vollständige Unterstützung 7
Hinweise
Hinweise In Internet Explorer, fixed positioning doesn't work if the document is in quirks mode.
Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Before Firefox 44, position: fixed didn't create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari's long-time behavior.
Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
Table elements as sticky positioning containersChrome Vollständige Unterstützung 56Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 59IE Keine Unterstützung NeinOpera Vollständige Unterstützung 43Safari Vollständige Unterstützung 8WebView Android Vollständige Unterstützung 56Chrome Android Vollständige Unterstützung 56Firefox Android Vollständige Unterstützung 59Opera Android Vollständige Unterstützung 43Safari iOS Vollständige Unterstützung 8Samsung Internet Android Vollständige Unterstützung 6.0
stickyChrome Vollständige Unterstützung 56Edge Vollständige Unterstützung 16Firefox Vollständige Unterstützung 32
Vollständige Unterstützung 32
Keine Unterstützung 26 — 48
Deaktiviert
Deaktiviert From version 26 until version 48 (exclusive): this feature is behind the layout.css.sticky.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 43Safari Vollständige Unterstützung 6.1
Mit Präfix
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung 56Chrome Android Vollständige Unterstützung 56Firefox Android Vollständige Unterstützung 32
Vollständige Unterstützung 32
Keine Unterstützung 26 — 48
Deaktiviert
Deaktiviert From version 26 until version 48 (exclusive): this feature is behind the layout.css.sticky.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Vollständige Unterstützung 43Safari iOS Vollständige Unterstützung 6.1
Mit Präfix
Vollständige Unterstützung 6.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 6.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch