left

Probieren Sie es aus

left: 0;

left: 4em;

left: 10%;

left: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Syntax

/* <length> values */
left: 3px;
left: 2.4em;
left: anchor(--my-anchor 50%);
left: calc(anchor-size(--my-anchor inline, 100px) * 2);

/* <percentage>s of the width of the containing block */
left: 10%;

/* Keyword value */
left: auto;

/* Global values */
left: inherit;
left: initial;
left: revert;
left: revert-layer;
left: unset;

Werte

<length>

Ein negativer, null oder positiver <length>:

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

<percentage>

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

auto

Bestimmt, dass:

• für absolut positionierte Elemente sich die Position des Elements auf die right-Eigenschaft stützt, 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 ein statisches Element wäre.
• für relativ positionierte Elemente die Entfernung des Elements von seiner normalen Position auf die right-Eigenschaft basiert; oder wenn right ebenfalls auto ist, wird das Element horizontal überhaupt nicht verschoben.

Beschreibung

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

• Wenn position auf absolute oder fixed gesetzt ist, gibt die left-Eigenschaft den Abstand zwischen dem Außenabstand des linken Randes des Elements und dem inneren Rand des linken Randes 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 beinhaltet, 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 die Entfernung an, um die 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 Sticky-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 gedehnt, um beiden gerecht zu werden. Kann das Element nicht gedehnt werden, um beiden gerecht zu werden, ist die Position des Elements überbestimmt. In diesem Fall hat der left-Wert Vorrang, wenn der Container von links nach rechts verläuft; der right-Wert hat Vorrang, wenn der Container von rechts nach links verläuft.

Formale Definition

Formale Syntax

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  

Beispiele

Positionierung von Elementen

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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