<position>

Übersicht

Der <position> CSS Datentyp beschreibt eine Koordinate im 2D-Raum, die dazu verwendet wird, die Position relativ zu einer Box zu setzen.

Eine bestimmte Position kann durch zwei Schlüsselwörter mit bestimmten Versätzen angegeben werden. Ein Schlüsselwort repräsentiert einen Rand der Elementbox oder die Mittellinie zwischen zwei Rändern: left, right, top, bottom oder center (was entweder die Mitte zwischen dem linken und rechten Rand repräsentiert oder die Mitte zwischen dem oberen und unteren Rand, abhängig vom Kontext).

Ein Versatz kann entweder ein relativer Wert sein, ausgedrückt durch einen <percentage> Wert, oder ein absoluter <length> Wert. Positive Werte werden nach rechts oder unten versetzt, je nachdem, was zutrifft. Negative Werte werden in die anderen Richtungen versetzt.

Die endgültige Position, die durch den <position> Wert beschrieben wird, muss nicht innerhalb der Elementbox liegen.

Falls ein Versatz ohne zugehöriges Schlüsselwort angegeben wurde, wird für es center angenommen.

Interpolation

Die Werte für die Abzisse und die Ordinate werden unabhängig voneinander interpoliert. Da die Geschwindigkeit für beide durch dieselbe <timing-function> definiert wird, folgt der Punkt einer Linie.

Werte

/* 1-Wert-Syntax */
Schlüsselwort                  /* Der zugehörige Rand, die andere Richtung verweist auf center, die Mitte des Randes. */
<length> oder <percentage> /* Die Position auf der x-Achse, 50% für die y-Achse. */

/* 2-Werte-Syntax */
Schlüsselwort Schlüsselwort          /* Ein Schlüsselwort für jede Richtung, die Reihenfolge ist unwichtig. */
Schlüsselwort Wert            /* Der Wert ist der Versatz für den Rand, der durch das Schlüsselwort definiert wird. */

Formale Syntax

[ [ left | center | right | top | bottom | <percentage> | <length> ] |
                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
                  [ center | [ left | right ] [ <percentage> | <length> ]? ] && 
                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
                ]

Spezifikationen

Spezifikation Status Kommentar
CSS Values and Units Module Level 3
Die Definition von '<position>' in dieser Spezifikation.
Anwärter Empfehlung Listed die Links zu beiden Definitionen auf mit der Voraussetzung, dass diese koherent sind: falls CSS Backgrounds and Borders Module Level 3 unterstützt wird, muss deren Definition von <position> ebenfalls verwendet werden.
CSS Backgrounds and Borders Module Level 3
Die Definition von '<position>' in dieser Spezifikation.
Anwärter Empfehlung Definiert <position> explizit und erweitert es um die Unterstützung von Versätzen von einem beliebigen Rand.
CSS Level 2 (Revision 1)
Die Definition von '<position>' in dieser Spezifikation.
Empfehlung Erlaubt die Kombination von einem Schlüsselwort mit einem <length> oder einem <percentage> Wert.
CSS Level 1
Die Definition von '<position>' in dieser Spezifikation.
Empfehlung Definiert <position> anonym als Wert von background-position.

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
<position>Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
Four-value syntax for offset from any edgeChrome Vollständige Unterstützung 25Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 13IE Vollständige Unterstützung 9Opera Vollständige Unterstützung 10.5Safari Vollständige Unterstützung 7WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 25Firefox Android Vollständige Unterstützung 14Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 7Samsung Internet Android Vollständige Unterstützung 1.5
Syntax combining a keyword and <length> or <percentage>Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
Three-value syntax for properties other than background-position
Veraltet
Chrome Keine Unterstützung 25 — 68Edge Vollständige Unterstützung 12Firefox Keine Unterstützung 13 — 70IE Vollständige Unterstützung 9Opera Keine Unterstützung 10.5 — 55Safari Vollständige Unterstützung 1WebView Android Keine Unterstützung ≤37 — 68Chrome Android Keine Unterstützung 25 — 68Firefox Android Vollständige Unterstützung 14Opera Android Keine Unterstützung ? — 48Safari iOS Vollständige Unterstützung 1Samsung Internet Android Keine Unterstützung 1.5 — 10.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.