Propriété left de CSS
La propriété left définit le décalage horizontal d'un élément positionné par rapport à son bloc contenant.
Elle spécifie la distance entre le bord gauche de la marge de l'élément et le bord gauche de son bloc contenant. Si position est défini sur static, la propriété left n'a aucun effet.
L'effet de left dépend de la façon dont l'élément est positionné (voir la propriété position).
- Si
positionest défini surabsoluteoufixed, la propriétéleftspécifie la distance entre le bord gauche de l'élément et le bord gauche de son bloc contenant. - Si
positionest défini surrelative, la propriétéleftspécifie la distance dont le bord gauche de l'élément est déplacé vers la droite par rapport à sa position normale. - Si
positionest défini sursticky, la propriétéleftdécale l'élément par rapport à son bloc contenant. L'élément se comporte comme un positionnementrelativejusqu'à ce qu'il franchisse un seuil de défilement, après quoi il se comporte comme un positionnementfixed. - Si
positionest défini surstatic, la propriétéleftn'a aucun effet.
| Valeur initiale | auto |
|---|---|
| S'applique à | Éléments positionnés. |
| Héritée | Non. |
| Animable | Oui. La position de l'élément est animable. |
| Version | CSS2 |
| Syntaxe DOM | Object.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://fr.w3docs.com/build/images/w3docs-logo-black.png" alt="CSS left property" />
</body>
</html>Résultat
Exemple d'utilisation de la propriété left lorsque l'image se trouve à l'intérieur d'un <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://fr.w3docs.com/build/images/w3docs-logo-black.png" alt="CSS left property" /> This is some div element for
<br /> which the left side is defined
<br /> as 200px.
</div>
</body>
</html>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>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>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| auto | Le navigateur définit la position du bord gauche. C'est la valeur par défaut de cette propriété. | Tester » |
| length | Définit la position du bord gauche en px, cm, etc. Les valeurs négatives sont autorisées. | Tester » |
| % | Définit la position du bord gauche en pourcentage de la largeur du bloc contenant. Les valeurs négatives sont autorisées. | Tester » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Tester » |
| inherit | Hé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 contenant. Si left et margin-left sont tous deux spécifiés, left prend le dessus pour les calculs de positionnement.
Pratique
Que permet de faire la propriété 'left' en CSS ?