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.

Valeur initialeauto
Applicabilitééléments positionnés
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéesi spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto
Animableoui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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

Spécification État Commentaires
CSS Transitions
La définition de 'left' dans cette spécification.
Version de travail left peut désormais être animée.
CSS Level 2 (Revision 1)
La définition de 'left' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 5.5 5.0 1.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) 6.0 6.0 1.0

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, tregagnon, tcit
 Dernière mise à jour par : SphinxKnight,