Propriété CSS right

La propriété right spécifie une partie de la position des éléments positionnés.

Pour les éléments positionnés de manière absolue ou fixe, la propriété right spécifie la distance entre le bord droit de l'élément et le bord droit de son bloc contenant.

INFO

Si position est défini sur static, la propriété right n'a aucun effet.

L'effet de right dépend du positionnement de l'élément (voir la propriété position) :

Si position est défini sur absolute ou fixed, la propriété right spécifie la distance entre le bord droit de l'élément et le bord droit de son bloc contenant.
Si position est défini sur relative, la propriété right spécifie la distance de déplacement du bord droit de l'élément vers la droite par rapport à sa position normale.
Si position est défini sur sticky, la propriété right spécifie la distance par rapport au bord droit de la zone d'affichage lorsque l'élément devient collant.
Si position est défini sur static, la propriété n'a aucun effet.

Valeur initiale	auto
S'applique à	Éléments positionnés.
Hérité	Non.
Animable	Oui. La position de l'élément est animable.
Version	CSS2
Syntaxe DOM	Object.style.right = "50px";

Syntaxe

Syntaxe de la propriété CSS right

css

right: auto | length | initial | inherit;

Exemple avec une valeur en `px`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        right: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="https://fr.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
  </body>
</html>

Try it Yourself »

Résultat

Propriété CSS right

Exemple avec une valeur en `%`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        height: 150px;
        width: 100%;
        background-color: #ccc;
        color: #ffffff;
      }
      img {
        position: absolute;
        right: 30%;
        top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <img src="https://fr.w3docs.com/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
    <div>This is some div element.</div>
  </body>
</html>

Try it Yourself »

Exemple avec une valeur `initial`

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        max-width: 300px;
        line-height: 20px;
      }
      p {
        position: absolute;
        right: initial;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <h2>Right property example</h2>
    <div>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
      <p>Some text</p>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester
auto	Définit la position du bord droit. C'est la valeur par défaut de cette propriété.	Tester »
length	Définit la position du bord droit en px, em, rem, etc. Les valeurs négatives sont autorisées.	Tester »
%	Définit la position du bord droit en % de l'élément contenant. Les valeurs négatives sont autorisées.	Tester »
initial	Définit la propriété sur sa valeur par défaut (`auto`), ce qui permet au navigateur de calculer la position automatiquement.	Tester »
inherit	Hérite la propriété de l'élément parent.

Pratique

Quel est le rôle de la propriété 'right' en CSS ?

Elle est utilisée pour déplacer un bloc ou une ligne entière de texte vers la droite de sa position habituelle.Elle décale le bord droit d'un élément vers la droite de l'écran.Elle décale le bord droit d'un élément vers la gauche de l'écran.Elle est utilisée pour positionner le bord supérieur d'un élément à une distance spécifique du bord droit de son élément contenant.Elle peut affecter la position d'autres éléments.Elle n'est efficace que lorsque la propriété position est 'static'.Elle n'est efficace que lorsque la propriété position est 'absolute', 'fixed', 'relative' ou 'sticky'.

Propriété CSS right ​

Syntaxe ​

Exemple avec une valeur en px ​

Résultat ​

Exemple avec une valeur en % ​

Exemple avec une valeur initial ​

Valeurs ​

Pratique ​

Propriété CSS right

Syntaxe

Exemple avec une valeur en `px`

Résultat

Exemple avec une valeur en `%`

Exemple avec une valeur `initial`

Valeurs

Pratique