CSS/Eigenschaften/Positionierung/left

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Angabe left (Startposition von links) bestimmt, wo die linke Begrenzung eines positionierten Elementes verläuft.

  • CSS 1.0
  • CSS 2.1
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>left</title>
    <style>
      body { position: relative; }
      div {
        position: absolute;
        left: 400px;
        top: 200px;
        width: 250px;
        height: 380px;
        background-color: #F1F3F4;
      }
      img {
        position: absolute;
        left: 10px;
        top: 170px;
      }
      p { 
        position: absolute;
        top: 136px; 
        left: 160px;
        width: 208px; 
        background-color: #FFFFE0; 
        border: 1px solid #804000; 
        margin: 0; 
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <img src="http://wiki.selfhtml.org/images/3/31/Hund.gif" width="208" height="181" alt="Hund">
    <p>Dies ist ein absolut positionierter Text
      neben einer absolut positionierten Grafik.</p>
    <div>
      <img src="http://wiki.selfhtml.org/images/3/31/Hund.gif" width="208" height="181" alt="Hund">
      <p>Dies ist ein absolut positionierter Text
        über einer absolut positionierten Grafik.</p>
        Dasselbe noch einmal, jetzt in einem div-Element.
    </div>
  </body>
</html>
Die Angabe body {position: relative;} legt das body-Element als Bezugs„punkt“ für die absolute Positionierung fest. Darauf könnte in diesem einfachen Beispiel zwar verzichtet werden; in konkreten Projekten führt dies jedoch häufig zu unerwarteten Darstellungen.
Sehr schön ist zu sehen, dass absolut positionierte Elemente sich in ihren Elternelementen keinen Platz verschaffen. Hätte das div-Element keine festen Abmessungen, so wäre es nur so groß wie der Text „Dasselbe noch einmal …“

Mit left können Sie die Startposition von links bestimmen. Erlaubt sind dabei folgende Angaben:

Beachten Sie: Die Angabe left gilt nur für Elemente, deren position-Wert relative, absolute oder fixed ist.
Die Angabe ist der Abstand des linken Randes des Elements zum linken Rand seines Bezugselementes, ggf. zuzüglich eines margin-left des Elements. Ein linker Innenabstand des Bezugselements wird hingegen nur berücksichtigt, wenn für left kein konkreter Abstand angegeben wurde (also left: auto;).

Weblinks[Bearbeiten]