right

Exemple interactif

right: 0;

right: 4em;

right: 10%;

right: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">Je suis positionné absolument.</div>
    <p>
      Autant de boue dans les rues comme si les eaux venaient de se retirer de
      la surface de la terre, et il ne serait pas étonnant de rencontrer un
      Megalosaurus, d'environ douze mètres de long, se dandinant comme un lézard
      éléphantesque sur Holborn Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Syntaxe

/* Valeurs de type <length> */
right: 3px;
right: 2.4em;
right: anchor(--my-anchor 50%);
right: anchor-size(--my-anchor height, 65px);

/* Valeurs de type <percentage> */
right: 10%;

/* Valeur avec un mot-clé */
right: auto;

/* Valeurs globales */
right: inherit;
right: initial;
right: revert;
right: revert-layer;
right: unset;

Valeurs

<length>

Une longueur (<length>) négative, nulle ou positive :

• pour les éléments positionnés absolument, elle représente la distance par rapport au bord droit du bloc englobant.
• pour les éléments positionnés par ancre, la fonction anchor() se résout en une valeur <length> relative à la position du bord gauche ou droit de l'élément ancre associé (voir Utiliser les propriétés d'encart avec les valeurs de fonction anchor()), et la fonction anchor-size() se résout en une valeur <length> relative à la largeur ou à la hauteur de l'élément ancre associé (voir Définir la position de l'élément en fonction de la taille de l'ancre).
• pour les éléments positionnés relativement, elle représente la distance à laquelle l'élément est déplacé vers la gauche par rapport à sa position normale.

<percentage>

Un pourcentage (<percentage>) de la largeur du bloc englobant.

auto

Définit que :

• pour les éléments positionnés absolument, la position de l'élément est basée sur la propriété left, tandis que width: auto est traité comme une largeur basée sur le contenu ; ou si left est également auto, l'élément est positionné là où il devrait être horizontalement s'il était un élément statique.
• pour les éléments positionnés relativement, la distance de l'élément par rapport à sa position normale est basée sur la propriété left ; ou si left est également auto, l'élément n'est pas déplacé horizontalement du tout.

Description

L'effet de right dépend de la façon dont l'élément est positionné (c'est-à-dire la valeur de la propriété position) :

• Lorsque position est défini sur absolute ou fixed, la propriété right définit la distance entre la marge extérieure du bord droit de l'élément et la bordure intérieure du bord droit de son bloc englobant. Si l'élément positionné a un élément ancre associé, et que la valeur de la propriété inclut une fonction anchor(), right positionne le bord droit de l'élément positionné par rapport au bord <anchor-side> défini. La propriété right est compatible avec les valeurs left, right, start, end, self-start, self-end, center et <percentage>.
• Lorsque position est défini sur relative, la propriété right définit la distance à laquelle le bord droit de l'élément est déplacé vers la gauche par rapport à sa position normale.
• Lorsque position est défini sur sticky, la propriété right est utilisée pour calculer le rectangle de contrainte de sélection.
• Lorsque position est défini sur static, la propriété right n'a aucun effet.

Lorsque left et right sont tous deux définis, si rien ne l'empêche, l'élément s'étire pour satisfaire les deux. Si l'élément ne peut pas s'étirer pour satisfaire les deux — par exemple, si une width est déclarée — la position de l'élément est sur-contrainte. Dans ce cas, la valeur de left a la priorité lorsque le conteneur est de gauche à droite ; la valeur de right a la priorité lorsque le conteneur est de droite à gauche.

Définition formelle

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

Positionnement absolu et relatif utilisant right

HTML

<div id="relative">Positionnement relatif</div>
<div id="absolute">Positionnement absolu</div>

CSS

#relative {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#absolute {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}

Résultat

Déclarer à la fois left et right

Lorsque left et right sont tous deux déclarés, l'élément s'étirera pour satisfaire les deux, sauf si d'autres contraintes l'en empêchent. Si l'élément ne peut pas s'étirer ou se rétrécir pour satisfaire les deux, la position de l'élément est sur-contrainte. Dans ce cas, la priorité est basée sur la direction du conteneur : left a la priorité si la direction du conteneur est de gauche à droite, et right a la priorité si la direction du conteneur est de droite à gauche.

HTML

<div id="parent">
  Parent
  <div id="noWidth">Pas de largeur</div>
  <div id="width">width: 100px</div>
</div>

CSS

div {
  outline: 1px solid #cccccc;
}
#parent {
  width: 200px;
  height: 200px;
  background-color: #ffc7e4;
  position: relative;
}
/* déclarer à la fois left et right */
#width,
#noWidth {
  background-color: #c2ffd7;
  position: absolute;
  left: 0;
  right: 0;
}
/* déclarer une largeur */
#width {
  width: 100px;
  top: 60px;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés top, bottom et left
• La propriété raccourcie inset
• Les propriétés inset-block-start, inset-block-end, inset-inline-start et inset-inline-end
• Les propriétés raccourcies inset-block et inset-inline
• La propriété position
• Le module de mise en page positionnée CSS