--- title: left slug: Web/CSS/left tags: - CSS - Propriété - Reference translation_of: Web/CSS/left ---
{{CSSRef}}

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.

{{EmbedInteractiveExample("pages/css/left.html")}}

Pour les éléments positionnés de façon absolue (ceux pour lesquels {{cssxref("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 à {{cssxref("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 à {{cssxref("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 {{cssxref("position")}}: static, la propriété left n'a aucun effet.

Si les deux propriétés left et {{cssxref("right")}} sont définies et que l'élément ne peut pas s'étendre afin de satisfaire ces contraintes, 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 :

Pour plus d'informations sur les valeurs possibles, voir {{cssxref("<length>")}}.

<percentage>
Une valeur en pourcentage (type {{cssxref("<percentage>")}} par rapport à la largeur du bloc englobant.
auto
Un mot-clé qui représente :

Syntaxe formelle

{{csssyntax}}

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

{{EmbedLiveSample('Exemples',1200,650)}}

Spécifications

Spécification État Commentaires
{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}} {{Spec2('CSS3 Transitions')}} left peut désormais être animée.
{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}} {{Spec2('CSS3 Positioning')}} Décrit le comportement pour le positionnement adhérent (sticky).
{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}} {{Spec2('CSS2.1')}} Définition initiale.

{{cssinfo}}

Compatibilité des navigateurs

{{Compat("css.properties.left")}}

Voir aussi