CSS-Eigenschaft left

Die Eigenschaft left gibt den Teil der Position von positionierten Elementen an.

Die Eigenschaft left wird verwendet, um den linken Rand des Elements und den linken Rand seines enthaltenden Blocks für absolut oder fest positionierte Elemente festzulegen. Wenn die Position "static" gewählt wird, hat die Eigenschaft left keine Auswirkung.

Die Wirkung von links hängt davon ab, wie das Element positioniert ist (siehe Eigenschaft Position).

  • Wenn die Position auf "absolute" oderr "fixed" eingestellt ist, gibt die Eigenschaft left den Abstand zwischen dem linken Rand des Elements und dem linken Rand des enthaltenden Blocks an.
  • Wenn die Position auf "relative" eingestellt ist, gibt die Eigenschaft < span class="property">left an, wie weit der linke Rand des Elements von seiner normalen Position nach rechts verschoben wird.
  • Wenn die Position auf "sticky" eingestellt ist, ändert die Eigenschaft left ihre Position auf relativ, wenn sich das Element innerhalb des Ansichtsfensters befindet, und ändert sich auf fixiert, wenn es außerhalb liegt.
  • Wenn die Position auf "static" eingestellt ist, erscheint kein Effekt.
Anfangswert auto
Gilt für Positionierte Elemente
Geerbt Nein
Animierbar Ja. Die Position des Elements ist animierbar.
Version CSS2
DOM Syntax Object.style.left = "50px";

Syntax

left: auto | length | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      img {
      position: absolute;
      left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft left</h2>
    <p>Hier ist die Eigenschaft linke mit 35px definiert.</p>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property">
  </body>
</html>

Ein weiteres Beispiel, wo das Bild innerhalb des Elements <div> liegt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
      height: 150px;
      width: 400px;
      background-color: #ccc;
      color: #666;
      padding: 10px;
      }
      img {
      position: absolute;
      left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Left</h2>
    <div>
      <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property">
     Das ist ein Element div, für  <br> das auf der linken Seite <br> 150px definiert ist.
    </div>
  </body>
</html>

Im folgenden Beispiel ist die Eigenschaft left durch Prozentsätze definiert.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .example {
      position: absolute;
      left: 20%;
      top: 20%;
      width: 100px;
      height: 100px;
      background-color: #ccc;
      color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft Left</h2>
    <div class="example">left: 20%</div>
  </body>
</html>

Hier ist ein weiteres Beispiel, das alle Werte der Eigenschaft left enthält.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Beispiel für die Eigenschaft Left</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>

Werte

Wert Beschreibung
auto Der Browser stellt die Position des linken Randes. Es ist der Standardwert dieser Eigenschaft.
length Stellt die Position des linken Randes in px, cm usw. ein. Negative Werte sind erlaubt.
% Stellt die linke Randposition in % des enthaltenden Elements ein. Negative Werte sind erlaubt.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 5.0+

Übe dein Wissen

Was beschreibt die CSS-Eigenschaft 'links'?
Finden Sie das nützlich?