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>

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>

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>

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>

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.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 5.0+


Trouvez-vous cela utile?

Articles Associées