left

<length>

Eine negative, null oder positive <length>, die repräsentiert:

• für absolut positionierte Elemente den Abstand zur linken Kante des umschließenden Blocks.
• für Anker-positionierte Elemente die anchor() Funktion, die sich zu einem <length> Wert relativ zur Position der linken oder rechten Kante des zugehörigen Ankerelements auflöst.
• für relativ positionierte Elemente den Abstand, den das Element von seiner normalen Position nach rechts verschoben wird.

<percentage>

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

auto

Gibt an, dass:

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

inherit

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

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, relativ zu dem das Element 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 seiner 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 gedehnt werden kann, um beide zu erfüllen, ist die Position des Elements überbestimmt. 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 Kurzschreibweise
• inset-block-start, inset-block-end, inset-inline-start, und inset-inline-end
• inset-block und inset-inline Kurzschreibweisen
• position
• CSS positioniertes Layout Modul