W3docs
fr
Se connecter

Propriété CSS right

How to use the right CSS property to set the right position of an element. See the property values in use and practice.

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 initialeauto
S'applique àÉléments positionnés.
HéritéNon.
AnimableOui. La position de l'élément est animable.
VersionCSS2
Syntaxe DOMObject.style.right = "50px";

Syntaxe

Syntaxe de la propriété CSS right

right: auto | length | initial | inherit;

Exemple avec une valeur en px

<!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="/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
  </body>
</html>
Essayez vous-même »

Résultat

Propriété CSS right

Exemple avec une valeur en %

<!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="/build/images/w3docs-logo-black.png" alt="W3docs logo" width="146" height="41" />
    <div>This is some div element.</div>
  </body>
</html>
Essayez vous-même »

Exemple avec une valeur initial

<!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>
Essayez vous-même »

Valeurs

ValeurDescriptionTester
autoDéfinit la position du bord droit. C'est la valeur par défaut de cette propriété.Tester »
lengthDé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 »
initialDéfinit la propriété sur sa valeur par défaut (auto), ce qui permet au navigateur de calculer la position automatiquement.Tester »
inheritHérite la propriété de l'élément parent.

Pratique

Pratique

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