Propriété CSS right
Comment utiliser la propriété CSS right pour définir la position droite d'un élément. Découvrez les valeurs de la propriété et pratiquez.
La propriété CSS right définit le décalage horizontal d'un élément positionné — c'est-à-dire à quelle distance son bord droit se trouve d'un bord de référence. Seule, elle n'a aucun effet ; elle ne s'active qu'une fois que l'élément possède une valeur position différente de la valeur par défaut static.
Cette page explique comment right se comporte selon chaque schéma de positionnement, comment elle interagit avec left, et les pièges courants à éviter.
Fonctionnement de right
Le bord de référence à partir duquel right est mesuré dépend entièrement de la valeur position de l'élément :
absoluteoufixed—rightcorrespond à la distance entre le bord droit de l'élément et le bord droit de son bloc conteneur (pourabsolute, l'ancêtre positionné le plus proche ; pourfixed, le viewport).relative—rightdéplace l'élément vers la gauche par rapport à sa position normale, tout en conservant l'espace qu'il occupait initialement. (Le nom est contre-intuitif : une valeur positive derightéloigne l'élément du bord droit, c'est-à-dire vers la gauche.)sticky—rightest la distance depuis le bord droit du conteneur de défilement à laquelle l'élément « se colle » lors du défilement.static—rightn'a aucun effet.
Si position est static (la valeur par défaut), right est ignoré. Définissez d'abord position: relative, absolute, fixed ou sticky.
right vs left
Si vous définissez à la fois left et right sur le même élément, le résultat dépend de la width et du sens d'écriture :
- Avec
width: auto, l'élément s'étire pour satisfaire les deux décalages — utile pour épingler un élément à une distance fixe de chaque côté de son conteneur. - Avec une
widthfixe, les deux valeurs surcontraignent la boîte. En texte de gauche à droite,leftl'emporte etrightest ignoré ; en texte de droite à gauche,rightl'emporte.
Lorsque vous n'avez besoin que d'un seul décalage horizontal, définissez uniquement left ou uniquement right et laissez l'autre à auto.
| Valeur initiale | auto |
|---|---|
| S'applique à | Les éléments positionnés. |
| Hérité | Non. |
| Animatable | Oui. La position de l'élément est animatable. |
| Version | CSS2 |
| Syntaxe DOM | Object.style.right = "50px"; |
Syntaxe
right: auto | length | percentage | initial | inherit;Exemples
Exemple avec une valeur en px
Ici, l'image est extraite du flux normal avec position: absolute et fixée à 35px du bord droit de la page.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
right: 35px;
}
</style>
</head>
<body>
<h2>Right property example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
</body>
</html>Résultat
Exemple avec une valeur en %
Une valeur en pourcentage est calculée par rapport à la largeur du bloc conteneur, donc right: 30% maintient le décalage proportionnel lorsque le conteneur est redimensionné.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 150px;
width: 100%;
background-color: #ccc;
color: #ffffff;
}
img {
position: absolute;
right: 30%;
top: 120px;
}
</style>
</head>
<body>
<h2>Right property example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
<div>This is some div element.</div>
</body>
</html>Exemple avec la valeur initial
initial réinitialise right à sa valeur par défaut auto, ce qui permet au navigateur de placer le bord droit automatiquement en fonction des autres décalages et de la taille de la boîte.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
position: relative;
max-width: 300px;
line-height: 20px;
}
p {
position: absolute;
right: initial;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Right property example</h2>
<div>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
<p>Some text</p>
</div>
</body>
</html>Valeurs
| Valeur | Description | Tester |
|---|---|---|
| auto | Définit la position du bord droit. C'est la valeur par défaut de cette propriété. | Tester » |
| length | Définit la position du bord droit en px, em, rem, etc. Les valeurs négatives sont autorisées. | Tester » |
| % | Définit la position du bord droit en % de l'élément conteneur. Les valeurs négatives sont autorisées. | Tester » |
| initial | Réinitialise la propriété à sa valeur par défaut (auto), ce qui laisse le navigateur calculer la position automatiquement. | Tester » |
| inherit | Hérite de la propriété de l'élément parent. |
Propriétés associées
La propriété right est l'une des quatre propriétés d'insertion qui fonctionnent conjointement avec position :
left— décale le bord gauche de l'élément.top— décale le bord supérieur de l'élément.bottom— décale le bord inférieur de l'élément.