left

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.

/* <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;

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

#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;
}

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

• position, right, bottom, left