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.

/* 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;

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 vaut absolute ou fixed, right indique la distance entre le bord droit de l'élément et le bord droit du bloc englobant.
  • Quand position vaut relative, 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 vaut sticky, right se comporte comme relative lorsque l'élément est à l'intérieur de la zone d'affichage (viewport) et comme fixed lorsque l'élément est en dehors de la zone d'affichage.
  • Quand position vaut static, 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).

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

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

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 (Oui)15.551
FonctionnalitéAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple1 (Oui) (Oui)46 (Oui)1

Voir aussi

É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,