left

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

BCD tables only load in the browser

Siehe auch

position, right, bottom, left