right

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

Exemple interactif

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 et que l'élément ne peut pas s'étendre afin de satisfaire ces deux contraintes, 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

css
/* 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 ; ou, si left vaut aussi auto, l'élément serait positionné horizontalement comme s'il avait été un élément statique.
  • 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.

Définition formelle

Valeur initialeauto
Applicabilitééléments positionnés
Héritéenon
Pourcentagesse rapporte à la largeur du bloc contenant
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() ;

Syntaxe formelle

right = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline

Exemples

CSS

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

html
<div id="exemple_3">Exemple 3</div>
<div id="exemple_4">Exemple 4</div>

Résultat

Spécifications

Specification
CSS Positioned Layout Module Level 3
# insets

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi