Propriété CSS right

La propriété right définit, en partie, la position des éléments positionnés.

La propriété right est utilisée pour définir le bord de la marge droite de l'élément et le bord droit de son bloc conteneur pour les éléments positionnés en absolu ou fixe.

Si la position est séléctée "static", la propriété right n'aura aucun effet.

L'effet de la propriété right dépend de la façon dont l'élément est positionné (voyez la propriété position ).

  • Si la position est définie à "absolute" ou "fixed", la propriété right spécifie la distance entre le bord droit de l'élément et le bord droit du bloc englobant.
  • Si la position est définie à "relative", la propriété right spécifie la distance de laquelle le bord droit de l'élément est décalé vers la gauche par rapport à sa position normale.
  • Si la position est définie à "sticky", la propriété right change sa position à relative lorsque l'élément est à l'intérieur de la zone d'affichage (viewport), et change à fixed lorsque l'élément est en dehors de la zone d'affichage.
  • Si la position est définie à "static", aucun effet n'apparaît.
Valeur initiale auto
Appliquée à Éléments positionnés.
Héritée Non.
Animable Oui. La position de l'élément est animable.
Version CSS2
Syntaxe DOM Object.style.right = "50px";

Syntaxe

right: auto | length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      position: absolute;
      right: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété right</h2>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41">
  </body>
</html>

Un autre exemple, dans lequel la propriété right est spécifiée par "%":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div{
      height:150px;
      width:100%;
      background-color: #ccc;
      color: #ffffff;
      }
      img {
      position: absolute;
      right: 30%;
      top:120px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété right</h2>
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41">
    <div> Quelque élément div.</div>
  </body>
</html>

Valeurs

Valeur Description
auto Définit la position du bord droit. C'est la valeur initiale de cette propriété.
length Définit la position du bord droit en px, cm etc. Valeurs négatives sont autorisées.
% Définit la position du bord droit en % de l'élément englobant. Valeurs négatives sont autorisées.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

1.0+ 12.0+ 1.0+ 1.0+ 5.0+


Trouvez-vous cela utile?

Articles Associées