left

<length>

Ein negativer, nuller oder positiver <length>:

• für absolut positionierte Elemente stellt er den Abstand zum linken Rand des umgebenden Blocks dar.
• für ankerpositionierte Elemente löst die anchor()-Funktion einen <length>-Wert relativ zur Position des linken oder rechten Randes des zugehörigen Ankerelements auf (siehe Verwendung von Einsatzeigenschaften mit anchor()-Funktionswerten), und die anchor-size()-Funktion löst einen <length>-Wert relativ zur Breite oder Höhe des zugehörigen Ankerelements auf (siehe Festlegen der Elementposition basierend auf Ankergröße).
• für relativ positionierte Elemente stellt er den Abstand dar, um den das Element nach rechts von seiner normalen Position 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 festgelegt 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 werden sollte, wenn es sich um ein statisches Element handeln würde.
• für relativ positionierte Elemente basiert der Abstand des Elements von seiner normalen Position auf der right-Eigenschaft; oder wenn right ebenfalls auto ist, wird das Element horizontal überhaupt nicht bewegt.

inherit

Gibt an, dass der Wert derselbe ist wie der berechnete Wert seines Elternelements (das möglicherweise nicht sein umgebender Block ist). Dieser berechnete Wert wird dann behandelt, als wäre er ein <length>, <percentage>, oder das auto-Schlüsselwort.

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 des linken Randes des Elements und dem inneren Rand des linken Randes 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 enthält, positioniert left den linken Rand des positionierten Elements relativ zur Position des angegebenen <anchor-side> Randes. 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, um den der linke Rand des Elements von seiner normalen Position nach rechts verschoben wird.
• Wenn position auf sticky gesetzt ist, wird die left-Eigenschaft zur Berechnung des klebrigen Beschränkungsrechtecks 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 beide zu erfüllen. Wenn das Element nicht gestreckt werden kann, um beide zu erfüllen, ist die Position des Elements überspezifiziert. In diesem Fall hat der left-Wert Vorrang, wenn das Container von links nach rechts ausgerichtet ist; der right-Wert hat Vorrang, wenn das Container 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;
  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;
}
#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 positionsbasiertes Layout Modul