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.

* Some parts of this feature may have varying levels of support.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
right
anchor()
Experimental
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Voir aussi