W3docs
fr
Se connecter

Propriété CSS left

Comment utiliser la propriété CSS left pour définir la position gauche d'un élément en combinaison avec la propriété position. Exemples de valeurs.

La propriété left définit le décalage horizontal d'un élément positionné par rapport à son bloc conteneur. C'est l'une des quatre propriétés de décalage — avec right, top et bottom — qui permettent de déplacer un élément par rapport à sa position initiale.

Elle indique la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc conteneur. Une valeur positive pousse l'élément vers la droite ; une valeur négative le tire vers la gauche. La propriété left ne prend effet que sur les éléments dont la position est différente de la valeur par défaut static.

Fonctionnement de left avec position

La signification exacte de left dépend entièrement de la façon dont l'élément est positionné ; vous devez donc presque toujours définir position en premier.

  • Si position est définie sur absolute ou fixed, la propriété left indique la distance entre le bord gauche de l'élément et le bord gauche de son bloc conteneur.
  • Si position est définie sur relative, la propriété left indique la distance dont le bord gauche de l'élément est déplacé vers la droite par rapport à sa position normale.
  • Si position est définie sur sticky, la propriété left décale l'élément par rapport à son bloc conteneur. L'élément se comporte comme un positionnement relative jusqu'à ce qu'il franchisse un seuil de défilement, après quoi il se comporte comme un positionnement fixed.
  • Si position est définie sur static (valeur par défaut), la propriété left n'a aucun effet.

Lorsque left et right sont tous deux définis sur un élément positionné en absolu, left l'emporte pour les langues de gauche à droite (et right l'emporte dans les contextes de droite à gauche), sauf si width est auto — auquel cas l'élément s'étire pour satisfaire les deux.

Valeur initialeauto
S'applique àÉléments positionnés.
HéritéNon.
AnimatableOui. La position de l'élément est animatable.
VersionCSS2
Syntaxe DOMObject.style.left = "50px";

Syntaxe

Syntaxe de la propriété CSS left

left: auto | length | initial | inherit;

Exemple de la propriété left :

Exemple de la propriété CSS left avec la propriété position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <p>Here the left property is defined as 35px.</p>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" />
  </body>
</html>
Essayez vous-même »

Résultat

Propriété CSS left

Exemple d'utilisation de la propriété left lorsque l'image se trouve dans un élément <div> :

Exemple de la propriété CSS left avec la balise img

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        height: 150px;
        width: 400px;
        background-color: #ccc;
        color: #666;
        padding: 10px;
      }
      img {
        position: absolute;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div>
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" /> This is some div element for
      <br /> which the left side is defined
      <br /> as 200px.
    </div>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété left spécifiée avec des pourcentages :

Exemple de la propriété CSS left avec une valeur en pourcentage

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        position: absolute;
        left: 20%;
        top: 20%;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="example">left: 20%</div>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété left avec toutes les valeurs :

Exemple de la propriété CSS left avec les valeurs auto, px et % (pourcentage)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Left property example</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

ValeurDescriptionEssayer
autoLe navigateur définit la position du bord gauche. C'est la valeur par défaut de cette propriété.Essayer »
lengthDéfinit la position du bord gauche en px, cm, etc. Les valeurs négatives sont autorisées.Essayer »
%Définit la position du bord gauche en pourcentage de la largeur du bloc conteneur. Les valeurs négatives sont autorisées.Essayer »
initialRétablit la valeur par défaut de la propriété.Essayer »
inheritHérite la propriété de son élément parent.

Remarque : Sur les éléments positionnés, left définit le décalage horizontal par rapport au bloc conteneur. Si left et margin-left sont tous deux spécifiés, left a la priorité pour les calculs de positionnement.

Quand utiliser left

  • Épingler un élément d'interface dans un coin. Combinez position: fixed avec left (et top) pour maintenir un bouton, un badge ou un widget de chat en place pendant le défilement de la page.
  • Décaler légèrement un élément. Avec position: relative, une petite valeur left déplace un élément de sa position naturelle sans le retirer du flux du document, de sorte que le contenu environnant conserve son espace.
  • Superpositions à l'intérieur d'une boîte. Donnez à un conteneur position: relative et à l'enfant position: absolute, puis left positionne l'enfant par rapport à ce conteneur plutôt qu'à la page entière.

Pour les mises en page devant prendre en charge plusieurs directions d'écriture, envisagez la propriété logique inset-inline-start : elle suit la direction du texte, se mappant automatiquement sur left pour les langues de gauche à droite et sur right pour les langues de droite à gauche.

Compatibilité des navigateurs

La propriété left fait partie de CSS2 et fonctionne dans tous les navigateurs modernes, y compris toutes les versions de Chrome, Firefox, Safari, Edge et Opera.

Pratique

Pratique
Qu'est-ce qui peut être réalisé avec la propriété 'left' en CSS ?
Qu'est-ce qui peut être réalisé avec la propriété 'left' en CSS ?
Was this page helpful?