La propriété right définie, en partie, la position des éléments positionnés.

Dans le cas des éléments positionnés de manière absolue (ceux avec position: absolute ou position: fixed), la propriété définie la distance entre la marge droite de l'élément et le bord droit du bloc qui le contient.

La propriété right n'a aucun effet sur les éléments non-positionnés.

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).

Valeur initialeauto
Applicabilitééléments positionnés
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
Médiavisuel
Valeur calculéesi 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'animationune longueur, pourcentage ou calc() ;
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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ère width: 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, si left vaut également auto, aucun décalage.
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 Level 2 (Revision 1)
La définition de 'right' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) (Oui) 5.5 5.0 1.0
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) (Oui) 6.0 6.0 1.0

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Prinz_Rana, fscholz, Sebastianz, teoli, FredB, Delapouite
 Dernière mise à jour par : SphinxKnight,