Übersicht

Die right CSS Eigenschaft gibt einen Teil der Position eines positionierten Elements an.

Bei absolut positionierten Elementen (position: absolute oder position: fixed) gibt sie den Abstand zwischen der rechten, äußeren Kante des Elements und der rechten Kante des umschließenden Blocks an.

Bei relativ positionierten Elementen (position: relative) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die left Eigenschaft definiert wurde, überschreibt diese den Wert der right Eigenschaft. Wenn left den Wert auto besitzt, ist der berechnete Wert für right gleich dem Wert von left mit umgedrehtem Vorzeichen.
Wenn beide Eigenschaften einen anderen Wert als auto besitzen, wird right ignoriert und auf auto gesetzt.

Initialwertauto
Anwendbar aufpositionierte Elemente
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Medienvisuell
Berechneter Wertfalls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto
AnimationstypLängenangabe, Prozentsatz oder calc();
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Werte

<Länge>
Eine Längenangabe, die positive und negative Werte sowie Null erlaubt.
<Prozentzahl>
Eine prozentuale Angabe, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Breite des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie auto behandelt.
auto
Standardwert. Die horizontale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch left, margin, padding oder durch die Breite.
inherit
Der Wert des Elternelements wird geerbt.

Formelle Syntax

<length> | <percentage> | auto

Beispiele

#left {
  width: 100px;
  height: 100px;
  background-color: #FFC7E4;
  position: relative;
  top: 20px;
  left: 20px;
}

#right {
  width: 100px;
  height: 100px;
  background-color: #FFD7C2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}
<div id="left">links</div>
<div id="right">rechts</div>

Spezifikationen

Spezifikation Status Kommentar
CSS Transitions
Die Definition von 'right' in dieser Spezifikation.
Arbeitsentwurf Definiert right als animierbar.
CSS Level 2 (Revision 1)
Die Definition von 'right' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 5.5Opera Vollständige Unterstützung 5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, fscholz, Sebastianz, FredB, The Witcher
Zuletzt aktualisiert von: SJW,