left

Exemple interactif

left: 0;

left: 4em;

left: 10%;

left: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">J'ai une position absolue.</div>
    <p>
      Il y a autant de boue dans les rues que si les eaux venaient à peine de se
      retirer de la surface de la terre, et il ne serait pas étonnant de croiser
      un Mégalosaure, long d'une douzaine de mètres, se dandinant comme un
      lézard éléphantesque dans Holborn Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Syntaxe

/* Valeurs de type <length> */
left: 3px;
left: 2.4em;
left: anchor(--my-anchor 50%);
left: calc(anchor-size(--my-anchor inline, 100px) * 2);

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

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

/* Valeurs globales */
left: inherit;
left: initial;
left: revert;
left: revert-layer;
left: unset;

Valeurs

<length>

Une valeur <length> négative, nulle ou positive :

• pour les éléments positionnés de façon absolue, elle représente la distance jusqu'au bord gauche du bloc englobant.
• pour les éléments positionnés avec une ancre, la fonction anchor() se résout en une valeur <length> relative à la position du bord gauche ou droit de l'élément d'ancre associé (voir Utiliser les propriétés d'encart avec des valeurs de fonction anchor()), et la fonction anchor-size() se résout en une valeur <length> relative à la largeur ou la hauteur de l'élément d'ancre associé (voir Définir la position d'un élément en fonction de la taille de l'ancre).
• pour les éléments positionnés de façon relative, elle représente la distance de déplacement de l'élément vers la droite par rapport à sa position normale.

<percentage>

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

auto

Indique que :

• pour les éléments positionnés de façon absolue, la position de l'élément est basée sur la propriété right, tandis que width: auto est considérée comme une largeur basée sur le contenu ; ou si right vaut aussi auto, l'élément est positionné là où il devrait l'être horizontalement s'il était un élément statique.
• pour les éléments positionnés de façon relative, la distance de l'élément par rapport à sa position normale est basée sur la propriété right ; ou si right vaut aussi auto, l'élément n'est pas déplacé horizontalement.

Description

L'effet de left dépend de la façon dont l'élément est positionné (c'est-à-dire la valeur de la propriété position) :

• Lorsque position vaut absolute ou fixed, la propriété left définit la distance entre la marge extérieure du bord gauche de l'élément et la bordure intérieure du bord gauche de son bloc englobant. (Le bloc englobant est l'ancêtre par rapport auquel l'élément est positionné de façon relative.) Si l'élément positionné a un élément d'ancre associé et que la valeur de la propriété inclut une fonction anchor(), left positionne le bord gauche de l'élément positionné par rapport à la position du bord <anchor-side> spécifié. La propriété left est compatible avec les valeurs left, right, start, end, self-start, self-end, center et <percentage>.
• Lorsque position vaut relative, la propriété left définit la distance de déplacement du bord gauche de l'élément vers la droite par rapport à sa position normale.
• Lorsque position vaut sticky, la propriété left est utilisée pour calculer le rectangle de contrainte sticky.
• Lorsque position vaut static, la propriété left n'a aucun effet.

Lorsque left et right sont toutes deux définies, et que les contraintes de largeur ne l'empêchent pas, l'élément s'étire pour satisfaire les deux. Si l'élément ne peut pas s'étirer pour satisfaire les deux, la position de l'élément est sur-définie. Dans ce cas, la valeur de left a la priorité lorsque le conteneur est en lecture de gauche à droite ; la valeur de right a la priorité lorsque le conteneur est en lecture de droite à gauche.

Définition formelle

Syntaxe formelle

left = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

Exemples

Positionner des éléments

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 id="exemple_5">
      <pre>
        position: absolute;
        right: 0;
        left: 0;
        top: 200px;
      </pre>
      <p>Position absolue avec à la fois gauche et droite déclarés</p>
    </div>
  </div>
</div>

CSS

#wrap {
  width: 700px;
  margin: 0 auto;
  background: #5c5c5c;
}

pre {
  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;
}
#exemple_5 {
  position: absolute;
  right: 0;
  left: 0;
  top: 100px;
  background-color: #d7ffc2;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés top, bottom et right
• La propriété raccourcie inset
• Les propriétés inset-block-start, inset-block-end, inset-inline-start et inset-inline-end
• Les propriétés raccourcies inset-block et inset-inline
• La propriété position
• Le module de disposition positionnée CSS