Ü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.

Initialwertauto
Anwendbar aufpositionierte Elemente
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Medienvisuell
Berechneter Wertfalls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto
Animierbarja, 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 Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

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 und width: 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 falls right ebenfalls auto ist, wird wird es nicht verschoben.

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

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

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: fscholz, Simplexible, Prinz_Rana, Sebastianz, SJW, The Witcher
 Zuletzt aktualisiert von: fscholz,