OUJOOD.COM
CSS position gauche Propriété left
La propriété de feuille de style css left permet de spécifier la position horizontale du coin haut gauche de l'élément par rapport à un point.
Définition et utilisation:La propriété left
La propriété CSS "left" permet de définir la position horizontale d'un élément par rapport à son élément parent. Elle peut être utilisée avec des valeurs absolues (en pixels, en pourcentages, etc.) ou relatives (en utilisant "auto" ou "inherit").
Syntaxe générale
La syntaxe générale pour utiliser la propriété "left" est la suivante :
élément {
left: valeur;
}
Exemples d'utilisation
Voici quelques exemples d'utilisation de la propriété "left" :
/* Positionne l'élément à 10 pixels de la bordure gauche de son parent */
élément {
left: 10px;
}
/* Positionne l'élément à 20% de la largeur de son parent */
élément {
left: 20%;
}
/* Positionne l'élément en utilisant la valeur par défaut (auto) */
élément {
left: auto;
}
Il est important de noter que l'utilisation de la propriété "left" doit être utilisée en conjonction avec d'autres propriétés telles que "position" et "width" pour un résultat optimal.
Sélectionner le code
p
{
position : absolute;
left:5px;
}
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS2 |
| Syntaxe JavaScript: | object.style.left="50px" |
Valeurs de la propriété :
| Valeur | Description |
|---|---|
| auto | l'explorateur calcule la position automatiquement. Par dfaut |
| nombre | définie la position en px ou cm |
| % | un pourcentage de la position de lélément parent |
| inherit | Indique que le paramètre de la propriété doit être héritée de l'élément parent. Internet Explorer (IE8 y compris) ne supporte pas cette valeur |
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 29 21 -webkit- | 11 | 28 18 -moz- | 9 6.1 -webkit- | 7 17 |
Astuces et conseils pour l'utilisation de la propriété CSS "left"
- 1- Utilisez la propriété "position" pour définir le type de positionnement de l'élément. La propriété "left" ne fonctionnera que si l'élément a un positionnement "absolute" ou "relative".
- 2- Utilisez des valeurs absolues (en pixels, en points, etc.) pour un positionnement précis et des valeurs relatives (en pourcentages, en em, etc.) pour un positionnement adaptatif à différentes tailles d'écran.
- 3- Utilisez la propriété "width" pour définir la largeur de l'élément avant de définir sa position horizontale avec "left".
- 4- Utilisez la propriété "right" pour définir la position horizontale de l'élément par rapport à la bordure droite de son parent.
- 5- Soyez conscient que l'utilisation de la propriété "left" peut entraîner des problèmes de mise en page si l'élément dépasse les limites de son parent.
En suivant ces astuces et conseils, vous devriez être en mesure de maîtriser efficacement l'utilisation de la propriété CSS "left" pour positionner des éléments de manière précise et adaptative.