CSS-Eigenschaft: right, Kategorien: Positionierung (allgemein), Visual formatting model (CSS 2.1)
Positionierung von rechts
Mit right: [Wert] und position: relative|absolute|fixed wird ein HTML-Element von rechts aus positioniert.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Positionierung von rechts |
| auto |
|
Verwandte Eigenschaften aus der Kategorie: Positionierung (allgemein), Visual formatting model (CSS 2.1):
Folgendes ist beim Einsatz von right zu beachten:
- Alleine eingesetzt hat die Eigenschaft right keine Auswirkung.
- Sie wirkt erst dann, wenn die Eigenschaft position den Wert relative, absolute oder fixed hat. Die Angabe einer position ist folglich Pflichtangabe im Zusammenhang mit right.
- Die Angabe position: static ist die Standardeinstellung der Browser, auch wenn dieser Wert als position explizit gesetzt ist, greift right nicht.
- right ist der Gegenspieler von left, es macht also keinen Sinn, beide Werte zu setzen. Anders als beispielsweise in PHP oder JavaScript, wo Fehler mit einer Fehlermeldung mitgeteilt werden, passiert das beim CSS nicht, falls right und left gleichzeitig gesetzt sind. Auch der W3C-Validator erkennt diese Angabe nicht als falsch.
- Falls right und left dem selben Element zugewiesen werden, greift left, selbst wenn die Angabe von right hinter left angegeben ist, als auch wenn man per !important die Wertigkeit von left erhöht.
- Gleiches gilt auch für die Kaskade, wenn ein Eltern-Element eine Einstellung von left hat, wird im Kind-Element die Angabe von right ignoriert
- Mögliche Werte sind Angaben in PX, %, EM usw..
- Der Standardwert ist auto, was in der Regel 0px von links bedeutet, wenn left oder right nicht gesetzt ist. Darauf sollte man sich jedoch nicht verlassen. Falls eine Angabe für top oder bottom gemacht wurde, sollte ein left: 0px gesetzt werden, damit man die Positionierung unter Kontrolle hat. Ist das nicht gesetzt, kann das HTML-Element auch schon mal wo anders erscheinen (oder auch gar nicht).
- In den Beispielen wird nebenbei der Unterschied von position: absolute und position: relative deutlich. In den Beispielen mit absoluter Positionierung fällt das blaue Element aus dem Elementfluss raus, die anderen Elementen "rücken" auf. Bei der relativen Positionierung "reserviert" die blaue Box trotzdem ihren Platz, die anderen Elemente bleiben da, wo wie auch wären, wenn die blaue Box nicht positioniert wäre.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS21 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Weiterführende Informationen zu right:
- W3C Spezifikation:
http://www.w3.org/TR/CSS21/visuren.html#propdef-right
Beispiele
HTML:
<div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>CSS:
div {
height: 290px;
border: 1px solid black;
position: relative; */
}
/* Damit die Positionierung greifen kann, muss das Eltern-Element selber positioniert sein. Wäre das nicht angegeben, wäre der BODY das Bezugselement. */
div div {
width: 75px;
height: 75px;
float: left;
margin: 5px;
border: 5px solid #c0c0c0;
}
/* Ausgangsbasis für das Beispiel - hiermit wird der Rahmen und die Ausmaße der bunten Boxen definiert. */
div div.doRed {
background-color: red;
}
div div.doBlue {
background-color: blue;
}
div div.doYellow {
background-color: yellow;
}
div div.doGreen {
background-color: green;
}Beispiel Nr. 1 So sieht's aus:
HTML:
<div class="doAbs">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>CSS:
div.doAbs div.doBlue {
position: absolute;
right : 50px;
}
/* Per absoluter Positionierung wird die blaue Box von rechts des umgebenden DIVs positioniert. Auch wenn nur eine blaue Box zu sehen ist, sind es eigentlich zwei, die sich exakt überlagern, da beide gleich positioniert sind. */Beispiel Nr. 2 So sieht's aus:
HTML:
<div class="doRel">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>CSS:
div.doRel div.doBlue {
position: relative;
right : 50px;
}
/* Bei der relativen Positionierung werden die blauen Boxen 50px vom rechten Bezugspunkt nach links geschoben, OHNE dass es Einfluss auf den Elementfluss hat. */Beispiel Nr. 3 So sieht's aus:
HTML:
<div class="doRel doPerc">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>CSS:
div.doPerc div.doBlue {
right : -50%;
}
/* Prozentuale Angaben sind ebenfalls möglich. Der negative Wert "zieht" die blaue Box nach rechts raus. Ausgangpunkt ist auch hier die linke obere Ecke des Elements selber. Die relative Positionierung ist im Beispiel Nr. 1 gesetzt und greift auch hier. */Beispiel Nr. 4 So sieht's aus:
HTML:
<div class="doAbs doPerc">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>CSS:
div.doAbs.doPerc div.doBlue {
right : 50%;
}
/* Hier eine Prozentangabe in Kombination mit einer absoluten Positionierung. Auch hier überlagern sich die beiden blauen Boxen wieder. */Beispiel Nr. 5 So sieht's aus:
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!