left

<length>

Ein negativer, nuller oder positiver <length>:

• für absolut positionierte Elemente stellt es den Abstand zur linken Kante des umschließenden Blocks dar.
• für ankerpositionierte Elemente löst die anchor()-Funktion auf einen <length>-Wert relativ zur Position der linken oder rechten Kante des zugehörigen Ankerelements auf (siehe Verwendung von Inset-Eigenschaften mit anchor()-Funktionswerten), und die anchor-size()-Funktion löst auf einen <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Festlegung der Elementposition basierend auf der Ankergröße).
• für relativ positionierte Elemente stellt es den Abstand dar, den das Element von seiner normalen Position aus nach rechts verschoben wird.

<percentage>

Ein <percentage> der Breite des umschließenden Blocks.

auto

Gibt an, dass:

• bei absolut positionierten Elementen die Position des Elements auf der Eigenschaft right basiert, während width: auto als eine Breite basierend auf dem Inhalt behandelt wird; oder wenn right ebenfalls auto ist, wird das Element dort positioniert, wo es horizontal positioniert werden sollte, wenn es ein statisches Element wäre.
• bei relativ positionierten Elementen basiert der Abstand des Elements von seiner normalen Position auf der Eigenschaft right; oder wenn right ebenfalls auto ist, wird das Element horizontal überhaupt nicht bewegt.

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

• Wenn position auf absolute oder fixed gesetzt ist, gibt die left-Eigenschaft den Abstand zwischen dem äußeren Rand der linken Kante des Elements und dem inneren Rand der linken Kante seines umschließenden Blocks an. (Der umschließende 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 enthält, 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 den Abstand an, den die linke Kante des Elements von ihrer normalen Position nach rechts bewegt wird.
• Wenn position auf sticky gesetzt ist, wird die left-Eigenschaft zur Berechnung des Haftraum-Rechtecks verwendet.
• Wenn position auf static gesetzt ist, hat die left-Eigenschaft keine Wirkung.

Wenn sowohl left als auch right definiert sind und Breitenbeschränkungen dies nicht verhindern, wird das Element gestreckt, um beiden zu entsprechen. Wenn das Element nicht gestreckt werden kann, um beiden zu entsprechen, ist die Position des Elements überspezifiziert. In diesem Fall hat der left-Wert Vorrang, wenn der Container von links nach rechts ist; der right-Wert hat Vorrang, wenn der Container von rechts nach links 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 positioned layout Modul