right
=====

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 initiale | `auto` |
| Applicabilité | éléments positionnés |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | si 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'animation | une longueur, pourcentage ou calc() ; |

Syntaxe formelle
----------------
```

right =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `position`,
* `left`,
* `top`,
* `bottom`