La propriété left permet de définir une partie de la position des éléments positionnés. Elle n'a aucun effet pour les éléments non-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 (le bloc englobant étant l'ancêtre par rapport auquel l'élément est positionné de façon relative).

Pour les éléments positionnés grâce à position: relative, c'est le décalage ajouté à gauche de l'élément (qui est donc déplacé vers la droite de sa position normale).

Pour les éléments positionnés grâce à position: sticky, cette propriété se comportera comme avec relative lorsque l'élément fait partie de la zone d'affichage (viewport) et comme avec fixed lorsque l'élément est en dehors de la zone d'affichage.

Lorsque position: static, la propriété left n'a aucun effet.

Si les deux propriétés left et right sont définies, la position de l'élément est « sur-définie ». Dans ce cas, la valeur left aura la priorité si le conteneur est orienté de gauche à droite (dans ce cas, la valeur calculée de right vaudra -left) et si le conteneur est orienté de droite à gauche, c'est la valeur right qui aura la priorité (auquel cas, la valeur calculée de left vaudra -right).

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 Positioned Layout Module Level 3
La définition de 'left' dans cette spécification.
Version de travail Décrit le comportement pour le positionnement adhérent (sticky).
CSS Level 2 (Revision 1)
La définition de 'left' dans cette spécification.
Recommendation Définition initiale.

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
Type d'animationune longueur, pourcentage ou calc() ;
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 5.5Opera Support complet 5Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

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