Übersicht
Die CSS Eigenschaft left
definiert einen Teil der Position von positionierten Elementen.
Bei absolut positionierten Elementen (jene mit position
: absolute
oder position: fixed
) wird der Abstand zwischen der linken, äußeren Rand des Elements und dem linken Rand des umschließenden Blocks definiert.
Initialwert | auto |
---|---|
Anwendbar auf | positionierte Elemente |
Vererbt | Nein |
Prozentwerte | bezieht sich auf die Breite des äußeren Elements |
Berechneter Wert | falls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto |
Animationstyp | Längenangabe, Prozentsatz oder calc() ; |
Syntax
/* <length> Werte */
left: 3px;
left: 2.4em;
/* <percentage> Werte bezogen auf die Breite des beinhaltenden Blocks */
left: 10%;
/* Schlüsselwortwerte */
left: auto;
/* Globale Werte */
left: inherit;
left: initial;
left: unset;
Werte
<length>
- Ist eine negative, null oder positive
<length>
, die folgendem entspricht:- für absolute positionierte Elemente, die Distanz zum linken Rand des beinhaltenden Blocks
- für relativ positionierte Elemente, der Versatz, um den das Element von seiner Position im normalen Fluss nach links verschoben ist, falls es nicht positioniert wäre.
<percentage>
- Ein
<percentage>
Wert der Breite des beinhaltenden Blocks, wie in der Übersicht beschrieben. auto
- Ist ein Schlüsselwort, das folgendem entspricht:
- für absolut positionierte Elemente, die Position des Elements basierend auf der
right
Eigenschaft undwidth: auto
wird als Breite basierend auf dem Inhalt behandelt. - für relativ positionierte Elemente, der linke Versatz des Elements von der Originalposition basierend auf der
right
Eigenschaft oder fallsright
ebenfallsauto
ist, wird wird es nicht verschoben.
- für absolut positionierte Elemente, die Position des Elements basierend auf der
Beispiele
CSS
#wrap {
width: 700px;
margin: 0 auto;
background: #5C5C5C;
}
pre {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
word-wrap: break-word;
}
#example_1 {
width: 200px;
height: 200px;
position: absolute;
left: 20px;
top: 20px;
background-color: #D8F5FF;
}
#example_2 {
width: 200px;
height: 200px;
position: relative;
top: 0;
right: 0;
background-color: #C1FFDB;
}
#example_3 {
width: 600px;
height: 400px;
position: relative;
top: 20px;
left: 20px;
background-color: #FFD7C2;
}
#example_4 {
width: 200px;
height: 200px;
position: absolute;
bottom: 10px;
right: 20px;
background-color: #FFC7E4;
}
HTML
<div id="wrap">
<div id="example_1">
<pre>
position: absolute;
left: 20px;
top: 20px;
</pre>
<p>Das einzige Element, das dieser Div beinhaltet, ist das Hauptfenster. Daher positioniert er sich in Bezug dazu.</p>
</div>
<div id="example_2">
<pre>
position: relative;
top: 0;
right: 0;
</pre>
<p>Relative Position in Bezug auf seine Geschwisterelemente.</p>
</div>
<div id="example_3">
<pre>
float: right;
position: relative;
top: 20px;
left: 20px;
</pre>
<p>Relativ zu seinem Geschwister-Div darüber, jedoch aus dem Inhaltsfluss entfernt.</p>
<div id="example_4">
<pre>
position: absolute;
top: 10px;
left: 20px;
</pre>
<p>Absolute Position innerhalb des Elternelements mit relativer Position.</p>
</div>
</div>
</div>
Live Beispiel
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Transitions Die Definition von 'left' in dieser Spezifikation. |
Arbeitsentwurf | Definiert left als animierbar. |
CSS Level 2 (Revision 1) Die Definition von 'left' in dieser Spezifikation. |
Empfehlung | Ursprüngliche Definition |
Browser Kompatibilität
BCD tables only load in the browser