CSS 2.1: `left`

Erläuterungen

Diese Eigenschaft dient zur Ergänzung der Eigenschaft position.

Für absolut positionierte Elemente ist dies der horizontale Abstand zwischen dem linken Rand des Inhalts des Elementes und dem linken Rand des umschließenden Blocks. Positive Werte zählen vom Rand des umschließenden Blocks nach rechts, negative Werte zählen vom Rand des umschließenden Blocks nach links.

Wirkung von positiven und negativen Werten: generell verschieben positive Werte das Element zur Mitte des umschließenden Blocks, negative Werte ziehen es über seinen Rand hinaus.

Für fix positionierte Elemente ist dies der horizontale Abstand zwischen dem linken Rand des Inhalts des Elementes und dem linken Rand des Ausgabefensters (=viewport). Meistens ist dies das Browserfenster. Positive Werte zählen vom Rand des Ausgabefensters nach rechts, negative Werte zählen vom Rand des Ausgabefensters nach links.

Für absolut und fix positionierte Elemente gilt: der Berechnete Wert für alle deklarierten Längenwerte ist der korrespondierende Absolutwert, für Prozentwerte ist es der Spezifizierte Wert, in allen anderen Fällen ist es auto.

Für relativ positionierte Elemente ist dies die horizontale Distanz, um die das Element aus seiner normalen Position im Elementfluß verschoben wird. Positive Werte bedeuten eine Verschiebung zur Elementmitte hin (nach rechts), negative Werte eine Verschiebung nach außen (links). Falls sowohl left als auch right explizit gegeben sind und die Schreibrichtung ltr (von links nach rechts) ist, bleibt der Wert für right unbeachtet. Ist die Schreibrichtung rtl (von rechts nach links), bleibt der Wert für left ohne Beachtung.

Strichstärken des Rahmens oder innere (padding) und äußere (margin) Abstände vom Rahmen bleiben dabei unberücksichtigt.

Der Berechnete Wert wird nach folgendem Algorithmus ermittelt:

Wenn left und right als auto deklariert sind, dann ist der Berechnete Wert gleich 0.
Wenn nur left als auto deklariert ist, dann entspricht der Berechnete Wert dem Wert für right mit umgekehrtem Vorzeichen.
Wenn nur right als auto deklariert ist, dann entspricht der Berechnete Wert dem Wert für left mit umgekehrtem Vorzeichen.
Wenn beide nicht als auto deklariert sind, dann muß einer der beiden Werte ignoriert und auf auto gesetzt werden. Bei Schreibrichtung von links nach rechts ist dies der Wert right, bei Schreibrichtung von rechts nach links ist dies der Wert left. Danach geht es weiter mit '2.' oder '3.'.

Auf statisch positionierte Elemente hat left keine Auswirkung. Der Berechnete Wert in diesem Fall ist immer auto.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'left' <length> | <percentage> | auto | inherit

<length>: Eine absolute oder relative Längenangabe. Negative Werte sind erlaubt.; Mehr Informationen über Längenwerte in CSS finden Sie im Grundlagenartikel Längenwerte.
<percent>: Prozentangabe, bezieht sich auf die Breite des umschließenden Blocks für absolut und fix positionierte Elemente und auf die Breite des Elementes selbst für relativ positionierte Elemente.
auto (Ausgangswert): Hat nur eine Wirkung auf absolut und fix positionierte Elemente.; Wenn die Eigenschaften left und right eines Elements beide mit auto deklariert sind, dann ist die horizontale Lage des Elements nur von seiner Breite sowie von margin und padding abhängig. Der Grund dafür liegt im Modell der visuellen Formatierung: die Summe aus left, margin-left, border-left-width, padding-left, width, padding-right, border-right-width, margin-right und right muss gleich der Breite des umschließenden Blocks sein.; Sind zuviele dieser Maße nicht gegeben, d.h. mit dem Ausgangswert auto belegt, werden in genau definierter Reihenfolge die Werte auto durch '0' ersetzt, bis eine eindeutige Position für das Element gefunden ist. Sind Überbestimmungen vorhanden, dann wird der Wert für left ignoriert, wenn für direction der Wert rtl gesetzt ist. Der Wert für right wird ignoriert, wenn der Wert für direction ltr ist.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel:

DIV.left { position: absolute; left: 100px; } DIV.left { position: relative; left: 180px; bottom: 50%; } DIV.left { position: static; left: 5%; width: 150px; }

Browserunterstützung

Die Eigenschaft left wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE/Win 6, IE 7: Wird ein Prozentwert deklariert, verschiebt IE/Win bis Version 6 die Box aufgrund von Browserfehlern um einen Betrag, der größer ist, als es sich aus den Abmessungen des umschließenden Blocks und des gegebenen Wertes errechnet (Siehe dazu auch Positionierung mit float). Von Version 7 an ist der Fehler korrigiert.
Auch wird der Wert inherit ignoriert.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

position,
margin-left, border-left-width, padding-left,
width,
padding-right, border-right-width, margin-right, right,

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.