Ihre Suchergebnisse

    left

    Übersicht

    Die left Eigenschaft macht eine Angabe zur Position von Elementen und wird daher zusammen mit der position Eigenschaft notiert, wenn für die Positionsart der Wert absolute, fixed oder relative definiert wurde.

    Bei absolut positionierten Elementen (position: absolute oder position: fixed) wird der Abstand zwischen der linken, äußeren Kante (margin edge) des Elements und der linken Kante des umschließenden Blocks definiert.

    Bei relativ positionierten Elementen (position: relative) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die left Eigenschaft definiert wurde, überschreibt diese den Wert der right Eigenschaft. Wenn left den Wert auto besitzt, ist der berechnete Wert für right gleich dem Wert der left Eigenschaft mit umgedrehtem Vorzeichen.
    Wenn beide Eigenschaften nicht den Wert auto besitzen, wird right ignoriert und auf auto gesetzt.

    • Standardwert auto
    • Anwendbar auf positionierte Elemente
    • Vererbt Nein
    • Prozentwerte bezieht sich auf die Breite des äusseren Elements
    • Medium visuell
    • Berechneter Wert if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
    • Animierbar Ja, als Längenangabe, Prozentsatz oder right
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    left: <length> | <percentage> | auto
    

    Werte

    <Länge>
    Eine Längenangabe, die positive und negative Werte sowie Null erlaubt.
    <Prozentzahl>
    Eine prozentuale Angabe, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Breite des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie auto behandelt.
    auto
    Standardwert. Die horizontale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch right, margin, padding oder durch die Breite.
    inherit
    Der Wert des Elternelements wird geerbt.

    Beispiele

    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;
    }

    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;
            top: 10px;
            left: 20px;
          </pre>
          <p>Absolute position inside of a parent with relative position</p>
        </div>
      </div>
    </div>

    Live Beispiel

    Browser Kompatibilität

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) 5.5 5.0 1.0
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 1.0 1.0 (1) 6.0 6.0 1.0

    Spezifikation

    Spezifikation Status Anmerkung
    CSS Transitions Working Draft left ist annimierbar.
    CSS Level 2 (Revision 1) Recommendation  

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Schlagwörter:
    Mitwirkende an dieser Seite: SJW, fscholz, The Witcher
    Zuletzt aktualisiert von: SJW,
    Seitenleiste ausblenden