CSS-Eigenschaft: left, Kategorien: Positionierung (allgemein), Visual formatting model (CSS 2.1)
Positionierung von links
Mit left: [Wert] und position: relative|absolute|fixed wird ein HTML-Element von links aus positioniert.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Positionierung von links |
| auto |
|
Verwandte Eigenschaften aus der Kategorie: Positionierung (allgemein), Visual formatting model (CSS 2.1):
Folgendes ist beim Einsatz von left zu beachten:
- Alleine eingesetzt hat die Eigenschaft left 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 left.
- Die Angabe position: static ist die Standardeinstellung der Browser, auch wenn dieser Wert als position explizit gesetzt ist, greift left nicht.
- left ist der Gegenspieler von right, es macht also keinen Sinn, beide Werte zu setzen. Anders als beispielsweise beispielsweise in PHP oder JavaScript, wo Fehler mit einer Fehlermeldung mitgeteilt werden, passiert das bei CSS nicht, falls left und right gleichzeitig gesetzt sind. Auch der W3C-Validator erkennt diese Angabe nicht als falsch.
- Falls left und right dem selben Element zugewiesen werden, greift left, selbst wenn die Angabe von right hinter left angegeben ist, ebenfalls nicht, wenn per !important die Wertigkeit von right erhöht wird.
- Gleiches gilt 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, etc.
- Der Standardwert ist auto, was 0px von links sind, wenn left oder right nicht gesetzt ist. Darauf sollte man sich jedoch nicht verlassen. Gerade der Internet Explorer 6 ermittelt den Default-Wert nicht zwingend auf 0px. 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 - je nach Browser - 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 left:
- W3C Spezifikation:
http://www.w3.org/TR/CSS21/visuren.html#propdef-left
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
justify-content - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
letter-spacing
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;
left: 50px;
}
/* Per absoluter Positionierung wird die blaue Box von links 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;
left: 50px;
}
/* Bei der relativen Positionierung werden die blauen Boxen 50px vom linken Bezugspunkt nach rechts geschoben, OHNE dass es Einfluss auf den Elementfluss hat. */
Beispiel Nr. 3 So sieht's aus:
HTML:
<div class="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 {
left: -50%;
}
/* Prozentuale Angaben sind ebenfalls möglich. Der negative Wert "zieht" die blaue Box nach links 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 {
left: 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!