W3docs
de
Anmelden

CSS left-Eigenschaft

Wie die CSS-Eigenschaft left den horizontalen Versatz eines positionierten Elements in Kombination mit der position-Eigenschaft festlegt.

Die Eigenschaft left definiert den horizontalen Versatz eines positionierten Elements relativ zu seinem umgebenden Block. Sie gehört zu den vier Versatz-Eigenschaften — neben right, top und bottom — die ein Element von seiner ursprünglichen Position verschieben.

Sie gibt den Abstand zwischen dem linken Außenrand des Elements und dem linken Rand seines umgebenden Blocks an. Ein positiver Wert verschiebt das Element nach rechts; ein negativer Wert zieht es nach links. Die Eigenschaft left wirkt nur bei Elementen, deren position nicht dem Standardwert static entspricht.

Wie left mit position zusammenarbeitet

Die genaue Bedeutung von left hängt vollständig davon ab, wie das Element positioniert ist. Deshalb setzt man in der Regel zuerst position.

  • Wenn position auf absolute oder fixed gesetzt ist, gibt left den Abstand zwischen dem linken Rand des Elements und dem linken Rand seines umgebenden Blocks an.
  • Wenn position auf relative gesetzt ist, gibt left an, um wie viel der linke Rand des Elements gegenüber seiner normalen Position nach rechts verschoben wird.
  • Wenn position auf sticky gesetzt ist, versetzt left das Element relativ zu seinem umgebenden Block. Das Element verhält sich wie relative-Positionierung, bis es einen Scroll-Schwellenwert überschreitet – danach verhält es sich wie fixed-Positionierung.
  • Wenn position auf static gesetzt ist (der Standard), hat left keine Wirkung.

Wenn bei einem absolut positionierten Element sowohl left als auch right gesetzt sind, gewinnt left für Sprachen mit Links-nach-Rechts-Schreibrichtung (und right gewinnt bei Rechts-nach-Links-Kontexten), außer wenn width auf auto steht — in diesem Fall dehnt sich das Element aus, um beide Werte zu erfüllen.

Anfangswertauto
Gilt fürPositionierte Elemente.
VererbbarNein.
AnimierbarJa. Die Position des Elements ist animierbar.
VersionCSS2
DOM-SyntaxObject.style.left = "50px";

Syntax

Syntax der CSS-Eigenschaft left

left: auto | length | initial | inherit;

Beispiel der left-Eigenschaft:

Beispiel der CSS-Eigenschaft left mit der position-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <p>Here the left property is defined as 35px.</p>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" />
  </body>
</html>
Probier es selbst »

Ergebnis

CSS left-Eigenschaft

Beispiel der Verwendung der left-Eigenschaft, wenn das Bild sich innerhalb eines <div>-Elements befindet:

Beispiel der CSS-Eigenschaft left mit dem img-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        height: 150px;
        width: 400px;
        background-color: #ccc;
        color: #666;
        padding: 10px;
      }
      img {
        position: absolute;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div>
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" /> This is some div element for
      <br /> which the left side is defined
      <br /> as 200px.
    </div>
  </body>
</html>
Probier es selbst »

Beispiel der left-Eigenschaft mit Prozentwerten:

Beispiel der CSS-Eigenschaft left mit Prozentwert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        position: absolute;
        left: 20%;
        top: 20%;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="example">left: 20%</div>
  </body>
</html>
Probier es selbst »

Beispiel der left-Eigenschaft mit allen Werten:

Beispiel der CSS-Eigenschaft left mit auto, px und % (Prozent)-Werten

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        position: absolute;
        left: auto;
        width: 100px;
        height: 100px;
        background-color: #ccc;
      }
      .box2 {
        position: absolute;
        top: 190px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: #444;
        color: #fff;
      }
      .box3 {
        position: absolute;
        left: 10%;
        top: 50%;
        width: 100px;
        height: 100px;
        background-color: #666;
        color: #fff;
      }
      .box4 {
        position: absolute;
        left: 20%;
        top: 70%;
        width: 100px;
        height: 100px;
        background-color: #777;
        color: #fff;
      }
      .box5 {
        position: absolute;
        left: -20px;
        top: 90%;
        width: 100px;
        height: 100px;
        background-color: #999;
        text-align: right;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="box1">left: auto</div>
    <div class="box2">left: 50px</div>
    <div class="box3">left: 10%</div>
    <div class="box4">left: 20%</div>
    <div class="box5">left: -20px</div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
autoDer Browser legt die Position des linken Rands fest. Dies ist der Standardwert der Eigenschaft.Ausprobieren »
lengthLegt die Position des linken Rands in px, cm usw. fest. Negative Werte sind erlaubt.Ausprobieren »
%Legt die Position des linken Rands als Prozentsatz der Breite des umgebenden Blocks fest. Negative Werte sind erlaubt.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom übergeordneten Element.

Hinweis: Bei positionierten Elementen definiert left den horizontalen Versatz vom umgebenden Block. Wenn sowohl left als auch margin-left angegeben sind, hat left Vorrang bei den Positionsberechnungen.

Wann left eingesetzt wird

  • UI-Elemente an einer Ecke fixieren. Kombiniere position: fixed mit left (und top), um eine Schaltfläche, ein Abzeichen oder ein Chat-Widget beim Scrollen der Seite an seiner Position zu halten.
  • Ein Element leicht verschieben. Mit position: relative verschiebt ein kleiner left-Wert ein Element von seiner natürlichen Position, ohne es aus dem Dokumentfluss zu entfernen, sodass der umgebende Inhalt seinen Platz behält.
  • Überlagerungen innerhalb eines Containers. Gib einem übergeordneten Element position: relative und dem untergeordneten Element position: absolute, dann positioniert left das Kind relativ zu diesem Container statt zur gesamten Seite.

Für Layouts, die mehrere Schreibrichtungen unterstützen müssen, empfiehlt sich die logische Eigenschaft inset-inline-start: Sie folgt der Textrichtung und entspricht in Sprachen mit Links-nach-Rechts-Schreibrichtung automatisch left und in Sprachen mit Rechts-nach-Links-Schreibrichtung right.

Browser-Unterstützung

Die Eigenschaft left ist Teil von CSS2 und funktioniert in jedem modernen Browser, einschließlich aller Versionen von Chrome, Firefox, Safari, Edge und Opera.

Übungen

Übung
Was kann mit der 'left'-Eigenschaft in CSS erreicht werden?
Was kann mit der 'left'-Eigenschaft in CSS erreicht werden?
Was this page helpful?