right

La propriété right définit, 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.

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

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

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

Compatibilité des navigateurs