left

<length>

Ein negativer, null oder positiver <length>:

• für absolut positionierte Elemente repräsentiert es die Entfernung zur linken Kante des umgebenden Blocks.
• für anker-positionierte Elemente wird die anchor() Funktion zu einem <length> Wert relativ zur Position der linken oder rechten Kante des zugehörigen Ankerelements aufgelöst (siehe Verwendung von Inset-Eigenschaften mit anchor()-Funktionswerten), und die anchor-size() Funktion wird zu einem <length> Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements aufgelöst (siehe Festlegen der Elementposition basierend auf der Ankergröße).
• für relativ positionierte Elemente repräsentiert es die Entfernung, um die das Element von seiner normalen Position nach rechts verschoben wird.

<percentage>

Ein <percentage> der Breite des umgebenden Blocks.

auto

Gibt an, dass:

• für absolut positionierte Elemente die Position des Elements basierend auf der right Eigenschaft ermittelt wird, während width: auto als Breite basierend auf dem Inhalt behandelt wird; oder wenn right ebenfalls auto ist, wird das Element dort positioniert, wo es horizontal positioniert wäre, wenn es ein statisches Element wäre.
• für relativ positionierte Elemente basiert die Entfernung des Elements von seiner normalen Position auf der right Eigenschaft; oder wenn right ebenfalls auto ist, wird das Element überhaupt nicht horizontal verschoben.

Die Wirkung von left hängt davon ab, wie das Element positioniert ist (d.h. vom Wert der position Eigenschaft):

• Wenn position auf absolute oder fixed gesetzt ist, gibt die left Eigenschaft die Entfernung zwischen dem äußeren Rand der linken Kante des Elements und dem inneren Rand der linken Kante seines umgebenden Blocks an. (Der umgebende Block ist der Vorfahre, zu dem das Element relativ positioniert ist.) Wenn das positionierte Element ein zugehöriges Ankerelement hat und der Eigenschaftswert eine anchor() Funktion beinhaltet, positioniert left die linke Kante des positionierten Elements relativ zur Position der angegebenen <anchor-side> Kante. Die left Eigenschaft ist kompatibel mit den Werten left, right, start, end, self-start, self-end, center und <percentage>.
• Wenn position auf relative gesetzt ist, gibt die left Eigenschaft die Entfernung an, um die die linke Kante des Elements von ihrer normalen Position nach rechts verschoben wird.
• Wenn position auf sticky gesetzt ist, wird die left Eigenschaft verwendet, um das Sticky-Constraint-Rechteck zu berechnen.
• Wenn position auf static gesetzt ist, hat die left Eigenschaft keine Auswirkung.

Wenn sowohl left als auch right definiert sind und Breitenbeschränkungen dies nicht verhindern, wird das Element gedehnt, um beide zu erfüllen. Wenn das Element nicht so gedehnt werden kann, dass beide erfüllt sind, ist die Position des Elements überspezifiziert. In diesem Fall hat der left Wert Vorrang, wenn das Container-Element von links nach rechts ausgerichtet ist; der right Wert hat Vorrang, wenn das Container-Element von rechts nach links ausgerichtet ist.

left = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

HTML

<div id="wrap">
  <div id="example_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>
      The only containing element for this div is the main window, so it
      positions itself in relation to it.
    </p>
  </div>

  <div id="example_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>Relative position in relation to its siblings.</p>
  </div>

  <div id="example_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>Relative to its sibling div above, but removed from flow of content.</p>

    <div id="example_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>Absolute position inside of a parent with relative position</p>
    </div>

    <div id="example_5">
      <pre>
        position: absolute;
        right: 0;
        left: 0;
        top: 200px;
      </pre>
      <p>Absolute position with both left and right declared</p>
    </div>
  </div>
</div>

CSS

#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}

pre {
  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;
}
#example_5 {
  position: absolute;
  right: 0;
  left: 0;
  top: 100px;
  background-color: #d7ffc2;
}

Ergebnis

• top, bottom, und right
• inset Kurzform
• inset-block-start, inset-block-end, inset-inline-start, und inset-inline-end
• inset-block und inset-inline Kurzformen
• position
• CSS positioniertes Layout Modul