La propriété right
définit, en partie, la position des éléments positionnés. La propriété right
n'a aucun effet sur les éléments non-positionnés.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
L'effet de la propriété right
dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété position
) :
- Quand
position
vautabsolute
oufixed
,right
indique la distance entre le bord droit de l'élément et le bord droit du bloc englobant. - Quand
position
vautrelative
,right
indique la distance de laquelle le bord droit de l'élément est décalé vers la gauche par rapport à sa position normale. - Quand
position
vautsticky
,right
se comporte commerelative
lorsque l'élément est à l'intérieur de la zone d'affichage (viewport) et commefixed
lorsque l'élément est en dehors de la zone d'affichage. - Quand
position
vautstatic
,right
n'a aucun effet.
Lorsque les propriétés right
et left
sont définies toutes les deux, la position de l'élément est sur-définie. Dans ce cas, la valeur de left
est prioritaire lorsque le contenant est disposé en lecture de gauche à droite (la valeur calculée de right
sera -left
), et la valeur de right
est prioritaire lorsque le contenant est disposé en lecture de droite à gauche (la valeur calculée de left
sera -right
).
Syntaxe
/* Valeurs de longueur */ /* Type <length> */ right: 3px; right: 2.4em; /* Valeurs de pourcentage */ /* Type <percentage> */ right: 10%; /* Valeur avec un mot-clé */ right: auto; /* Valeurs globales */ right: inherit; right: initial; right: unset;
Valeurs
<length>
- Une valeur de type
<length>
qui peut être négative, positive ou nulle et représente :- pour les éléments à positionnement absolu : la distance jusqu'au bord droit du bloc englobant.
- pour les éléments à positionnement relatif : le décalage à droite que l'élément subit par rapport à sa position dans le flux normal s'il n'était pas positionné.
<percentage>
- Une valeur de type
<percentage>
représentant le pourcentage de la largeur du bloc englobant. auto
- Un mot-clé qui représente :
- pour les éléments à positionnement absolu : la position de l'élément fondé sur la propriété
left
et considèrewidth: auto
comme une largeur fondée sur le contenu. - pour les éléments à positionnement relatif : le décalage à droite de l'élément par rapport à sa position originale fondé sur la propriété
left
ou, sileft
vaut égalementauto
, aucun décalage.
- pour les éléments à positionnement absolu : la position de l'élément fondé sur la propriété
inherit
- Un mot-clé indiquant que la valeur est identique à la valeur calculée de l'élément parent (qui peut ne pas être sont bloc contenant). Cette valeur calculée est manipulée comme si elle était de type
<length>
,<percentage>
ou comme si elle était le mot-cléauto
.
Syntaxe formelle
<length> | <percentage> | auto
Exemples
CSS
#exemple_3 { width: 100px; height: 100px; background-color: #FFC7E4; position: relative; top: 20px; left: 20px; } #exemple_4 { width: 100px; height: 100px; background-color: #FFD7C2; position: absolute; bottom: 10px; right: 20px; }
HTML
<div id="exemple_3">Exemple 3</div> <div id="exemple_4">Exemple 4</div>
Résultat
Spécifications
Spécification | État | Commentaire |
---|---|---|
CSS Transitions La définition de 'right' dans cette spécification. |
Version de travail | Définit right comme pouvant être animée. |
CSS Positioned Layout Module Level 3 La définition de 'right' dans cette spécification. |
Version de travail | Description du comportement pour le comportement adhérent (sticky). |
CSS Level 2 (Revision 1) La définition de 'right' dans cette spécification. |
Recommendation | Définition initiale. |
Valeur initiale | auto |
---|---|
Applicabilité | éléments positionnés |
Héritée | non |
Pourcentages | se rapporte à la largeur du bloc contenant |
Média | visuel |
Valeur calculée | si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto |
Type d'animation | une longueur, pourcentage ou calc() ; |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | 1 | 12 | 1 | 5.5 | 5 | 1 |
Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Support simple | 1 | Oui | Oui | 4 | Oui | 1 | Oui |