left

Baseline Widely available *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriétéCSSleft participe à la définition de la position horizontale d'unélément positionné. Cettepropriété d'encart n'a aucun effet sur les éléments non positionnés.

Exemple interactif

left: 0;

left: 4em;

left: 10%;

left: 20px;

<section>  <div>    <div>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

css

/* 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 fonctionanchor() se résout en une valeur<length> relative à la position du bord gauche ou droit de l'élément d'ancre associé (voirUtiliser les propriétés d'encart avec des valeurs de fonctionanchor()), et la fonctionanchor-size() se résout en une valeur<length> relative à la largeur ou la hauteur de l'élément d'ancre associé (voirDé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 quewidth: auto est considérée comme une largeur basée sur le contenu ; ou siright vaut aussiauto, 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 siright vaut aussiauto, l'élément n'est pas déplacé horizontalement.

Description

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

Lorsqueposition vautabsolute oufixed, 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 fonctionanchor(),left positionne le bord gauche de l'élément positionné par rapport à la position du bord<anchor-side> spécifié. La propriétéleft estcompatible avec les valeursleft,right,start,end,self-start,self-end,center et<percentage>.
Lorsqueposition vautrelative, 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.
Lorsqueposition vautsticky, la propriétéleft est utilisée pour calculer le rectangle de contrainte sticky.
Lorsqueposition vautstatic, la propriétéleft n'aaucun effet.

Lorsqueleft etright 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 estsur-définie. Dans ce cas, la valeur deleft a la priorité lorsque le conteneur est en lecture de gauche à droite ; la valeur deright a la priorité lorsque le conteneur est en lecture de droite à gauche.

Définition formelle

Valeur initiale	`auto`
Applicabilité	éléments positionnés
Héritée	non
Pourcentages	se rapporte à la largeur du bloc contenant
Valeur calculée	si défini par une longueur, la valeur absolue correspondante ; si défini par un pourcentage, la valeur telle que définie; sinon,`auto`
Type d'animation	unelongueur,pourcentage ou calc() ;

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

html

<div>  <div>    <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>    <pre>      position: relative;      top: 0;      right: 0;    </pre>    <p>La position est relative par rapport aux voisins.</p>  </div>  <div>    <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>      <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>      <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

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