Propriété CSS left

La propriété left spécifie une partie de la position des éléments positionnés.

La propriété left est utilisée pour définir le bord gauche de la marge de l'élément et le bord gauche de son bloc englobant pour les éléments absolus ou de la position fixée. Si la position est séléctée "static", la propriété left n'aura aucun effet.

L'effet de cette propriété dépend de comment l'élément est positionné (voyez la propriété position).

Si position est définie à "absolute" ou "fixed", la propriété left spécifie la distence enyte le bord gauche de l'élément et le bord gauche de son bloc englobant.
Si position est définie à "relative", la propriété < span class="property">leftspécifie la distence du bord gauche de l'élément est bougé vers la droite de sa position normale.
Si position est définie à "sticky", la propriété left change sa position à relative quand l'élément est dans la zone d'affichage, et change à fixé quand il est en dehors.
Si position est définie à "static", aucun effet n va apparaître.

Valeur initiale	auto
Appliquée à	Éléments positionnés.
Héritée	Non.
Animable	Oui. Position de l'élément est animable.
Version	CSS2
Syntaxe DOM	Object.style.left = "50px";

Syntaxe

left: auto | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      position: absolute;
      left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété left</h2>
    <p>Ici la propriété est définie à 35px.</p>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property">
  </body>
</html>

Essayez-vous-même!

Un autre exemple, où l'image est dans l'élément <div>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      height: 150px;
      width: 400px;
      background-color: #ccc;
      color: #666;
      padding: 10px;
      }
      img {
      position: absolute;
      left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété left</h2>
    <div>
      <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property">
      Un élément div pour  <br> dont le côté gauche est défini par  <br> comme 150px.
    </div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple suivant, la propriété left est spécifiée par pourcentages.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .example {
      position: absolute;
      left: 20%;
      top: 20%;
      width: 100px;
      height: 100px;
      background-color: #ccc;
      color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété left</h2>
    <div class="example">left: 20%</div>
  </body>
</html>

Essayez-vous-même!

Voici un autre exemple, qui contient tous les valeurs de la propriété left.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .box1 {
      position: absolute;
      left: auto;
      width: 100px;
      height: 100px;
      background-color: #ccc;
      }    
      .box2 {
      position: absolute;
      top: 190px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: #444;
      color: #fff;
      }    
      .box3 {
      position: absolute;
      left: 10%;
      top: 50%;
      width: 100px;
      height: 100px;
      background-color: #666;
      color: #fff;
      }  
      .box4 {
      position: absolute;
      left: 20%;
      top: 70%;
      width: 100px;
      height: 100px;
      background-color: #777;
      color: #fff;
      }
      .box5 {
      position: absolute;
      left: -20px;
      top: 90%;
      width: 100px;
      height: 100px;
      background-color: #999;
      text-align: right;
      color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété left</h2>
    <div class="box1">left: auto</div>
    <div class="box2">left: 50px</div>
    <div class="box3">left: 10%</div>
    <div class="box4">left: 20%</div>
    <div class="box5">left: -20px</div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Le navigateur ne définit pas la position du bord gauche. C'est la valeur initiale de cette propriété.
length	Définit la position du bord gauche en px, cm etc.. Valeurs négatives sont autorisées.
%	Définit la position du bord gauche en % de l'élément englobant. Valeurs négatives sont autorisées.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.