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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.