Übersicht
Die right
CSS Eigenschaft gibt einen Teil der Position eines positionierten Elements an.
Bei absolut positionierten Elementen (
oder position
: absoluteposition: 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.
Initialwert | auto |
---|---|
Anwendbar auf | positionierte Elemente |
Vererbt | Nein |
Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
Medien | visuell |
Berechneter Wert | falls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto |
Animierbar | ja, als Längenangabe, Prozentsatz oder calc() ; wenn beides Längenwerte sind, werden sie als Längenwerte gehandhabt. Wenn beides Prozentsätze sind, werden sie als Prozentsätze gehandhabt. Ansonsten werden beide Werte wie in einer calc() Funktion addiert (Wird ggf. zu Null). Und bei diesen calc() Funktionen wird jede Hälfte als Realzahl interpoliert. |
Kanonische Reihenfolge | die 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
Merkmal | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Grundlegende Unterstützung | 1.0 | 1.0 (1.7 oder früher) | 5.5 | 5.0 | 1.0 |
Merkmal | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Grundlegende Unterstützung | 1.0 | 1.0 (1) | 6.0 | 6.0 | 1.0 |