right

Résumé

La propriété CSS right définie une partie de la position des éléments.

Dans le cas des éléments positionnés de manière absolue (ceux avec position: absolute ou position: fixed), la propriété définie la distance depuis la marge droite de l'élément et le bord droit de l'élément qui le contient.

La propriété right n'a aucun effet sur les éléments non-positionnés.

Lorssque les propriétés right et left sont à la fois définies, 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 (c'est à dire que right est égal à -left), et la valeur de right est prioritaire lorsque le contenant est disposé en lecture de droit à gauche (c'est à dire que left est égal à -right).

  • Valeur initiale auto
  • S'applique à positioned elements
  • Héritée non
  • Pourcentages se rapporte à la largeur du bloc contenant
  • Média visual
  • 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
  • Animable oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
  • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Syntaxe formelle : <length> | <percentage> | auto
right: 3px         /* valeurs de type <length> */
right: 2.4em

right: 10%         /* valeur de type <percentage>, fait référence à la largeur du block contenant */

right: auto

right: inherit

Valeurs

<length>
Une valeur de type <longueur> 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 contenant.
  • pour les éléments à positionnement relatif, le décalage à droite dont l'élément est déplacé 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 contenant, utilisé comme décrit dans le résumé.
auto
Est 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.
  • 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
Est un mot-clé indiquant que la valeur est identique à la valeur calculée de son élément parent (qui peut ne pas être sont bloc contenant). Cette valeur calculée est manipulée comme si elle était de type {xref_csslength()}}, <percentage> ou le mot-clé auto.

Exemples

Voir l'exemple sur une page

#example_3 {
  width: 600px;
  height: 400px;
  background-color: #FFC7E4;
  position: relative;
  top: 20px;
  left: 20px;
}

#example_4 {
  width:200px;
  height:200px;
  background-color: #FFD7C2;
  position:absolute;
  bottom:10px;
  right: 20px;
}

Spécifications

Spécification Statut Commentaire
CSS Transitions Working Draft Définit right comme animable.
CSS Level 2 (Revision 1) Recommendation  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 1.0 (1.7 ou moins) 5.5 5.0 1.0
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 1.0 1.0 (1) 6.0 6.0 1.0

Voir également

Position-related CSS properties: position, float, top, right, bottom, left, display, visibility, clear

Étiquettes et contributeurs liés au document

Étiquettes :
Contributeurs ayant participé à cette page : Delapouite, FredB
Dernière mise à jour par : FredB,
Masquer la barre latérale