left

La propriété left permet de définir une partie de la position des éléments positionnés. Pour les éléments positionnés de façon absolue (ceux pour lesquels position: absolute ou position: fixed), elle définit la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant.

Syntaxe

/* Valeurs de longueur */
/* Type <length>       */
left: 3px;
left: 2.4em;

/* Valeurs proportionnelles à   */
/* la largeur du bloc englobant */
/* Type <percentage>            */
left: 10%;

/* Valeur avec un mot-clé */
left: auto;

/* Valeurs globales */
left: inherit;
left: initial;
left: unset;

Valeurs

<length>

Une valeur de longueur qui peut être positive, nulle ou négative et qui représente :

• La distance au bord gauche du bloc englobant pour les éléments positionnés de façon absolue
• Le décalage vers la gauche qui est appliqué à l'élément par rapport à sa position normale dans le flux pour les éléments positionnés de façon relative.

Pour plus d'informations sur les valeurs possibles, voir <length>.

<percentage>

Une valeur en pourcentage (type <percentage> par rapport à la largeur du bloc englobant.

auto

Un mot-clé qui représente :

• Pour les éléments positionnés de façon absolue : la position de l'élément selon la valeur de la propriété right, on considère width: auto comme une largeur basée sur le contenu.
• Pour les éléments positionnés de façon relative : le décalage à gauche de l'élément par rapport à sa position initiale selon la valeur de la propriété right. SI right vaut également auto, il n'y a aucun décalage.

Syntaxe formelle

<length> | <percentage> | auto

Exemples

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

#exemple_1 {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: #D8F5FF;
}

#exemple_2 {
  width: 200px;
  height: 200px;
  position: relative;
  top: 0;
  right: 0;
  background-color: #C1FFDB;

}
#exemple_3 {
  width: 600px;
  height: 400px;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: #FFD7C2;
}

#exemple_4 {
  width:200px;
  height:200px;
  position:absolute;
  bottom:10px;
  right:20px;
  background-color:#FFC7E4;
}

HTML

<div id="wrap">
  <div id="exemple_1">
    <pre>
      position: absolute;
      left: 20px;
      top: 20px;
    </pre>
    <p>Le seul élément englobant pour ce div est la fenêtre principale. Elle se positionne par rapport à elle.</p>
  </div>

  <div id="exemple_2">
    <pre>
      position: relative;
      top: 0;
      right: 0;
    </pre>
    <p>La position est relative par rapport aux voisins.</p>
  </div>

  <div id="exemple_3">
    <pre>
      float: right;
      position: relative;
      top: 20px;
      left: 20px;
    </pre>
    <p>La position est relative par rapport au div voisin mais on le retire du flux.</p>

    <div id="exemple_4">
      <pre>
        position: absolute;
        bottom: 10px;
        right: 20px;
      </pre>
      <p>La position est absolue à l'intérieur d'un parent positionné de façon relative.</p>
    </div>
  </div>
</div>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• position
• right
• bottom
• left