Attribut LEFT

Rôle

L’attribut left permet de positionner, à partir de la gauche, un élément qui échappe au flux HTML (disposition par défaut des éléments). Il peut être conjointement utilisé avec 3 autres attributs : right (à partir de la droite), bottom (à partir du bas), top (à partir du haut).

Si la valeur de l’attribut position est « absolute », la gauche correspond au bord à gauche du premier élément parent qui est aussi en position, ou le cas échéant, du bord à gauche de la fenêtre du navigateur.

Si la valeur de l’attribut position est « fixed », la gauche correspond au bord à gauche de la fenêtre du navigateur.

Si la valeur de l’attribut position est « relative », le bas correspond au bord à gauche de l’élément lui-même.

Version : CSS2

Héritage (inherit) : non

Propriété Javascript : element.style.left

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

#ct{
  width: 300px;
  height: 200px;
  border: thin solid red ;
  position : relative;
}
#droite{
  background-color: orange;
  border: thin solid blue ;
  position: absolute;
  width: 100px;
  margin: 10px;
  bottom: 0;
  left: 0;
}

– Le code HTML

<div id="ct">
  <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p>
  <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p>
  <p> Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. </p>
  <div id="droite">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>

Résultat

Le référentiel left du bloc en position « absolute » (bordure bleu) est le bord à gauche du bloc en position relative (bordure rouge).

Compatibilité

L’attribut left est pris en charge par tous les principaux navigateurs.

Valeurs

Les différentes valeurs de l’attribut left sont:

auto

Le navigateur calcule la position .
Syntaxe :
left : auto

length

Définit une valeur en px, pt, cm, em.
Syntaxe :
left : 20px

pourcentage

Définit une valeur en pourcentage par rapport à l’élément parent.
Syntaxe :
left : 30%

initial

Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
left : initial

inherit

Hérite de la même propriété que l’élément parent.
Syntaxe :
left : inherit

A voir aussi

display– clear– z-index– flex– align-content– align-items– align-self– columns– vertical-align