left

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die left CSS Eigenschaft beteiligt sich an der Spezifizierung der horizontalen Position eines positionierten Elements. Diese Einsatzeigenschaft hat keine Auswirkung auf nicht positionierte Elemente.

Probieren Sie es aus

Syntax

css
/* <length> values */
left: 3px;
left: 2.4em;
left: anchor(--myAnchor 50%);
left: calc(anchor-size(--myAnchor 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>:

<percentage>

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

auto

Gibt an, dass:

  • für absolut positionierte Elemente basiert die Position des Elements auf der right Eigenschaft, während width: auto als eine auf dem Inhalt basierende Breite 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 horizontal gar nicht verschoben.
inherit

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

Beschreibung

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 die Entfernung 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 Vorfahr, 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 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 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 es nicht verhindern, dehnt sich das Element aus, um beide zu erfüllen. Wenn das Element nicht gedehnt werden kann, um beide zu erfüllen, ist die Position des Elements überspezifiziert. In diesem Fall hat der left Wert Vorrang, wenn das Container links-nach-rechts ist; der right Wert hat Vorrang, wenn das Container rechts-nach-links ist.

Formale Definition

Anfangswertauto
Anwendbar aufpositionierte Elemente
VererbtNein
Prozentwertebezieht sich auf die Breite des äußeren Elements
Berechneter Wertfalls als Länge angegeben, die zugehörige absolute Länge; falls als Prozentwert angegeben, der angegebene Wert; ansonsten auto
AnimationstypLängenangabe, Prozentsatz oder calc();

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

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

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

Spezifikationen

Specification
CSS Positioned Layout Module Level 3
# insets

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
left
anchor()
Experimental
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Siehe auch