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.

Initialwertauto
Anwendbar aufpositionierte Elemente
VererbtNein
Prozentwertebezieht sich auf die Breite des ├Ąu├čeren Elements
Berechneter Wertfalls als L├Ąnge angegeben, die zugeh├Ârige absolute L├Ąnge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto
AnimationstypL├Ą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