---
title: right
slug: Web/CSS/right
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/right
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>right</code></strong> définit, en partie, la position des éléments positionnés. La propriété <code>right</code> n'a aucun effet sur les éléments non-positionnés.</p>

<div>{{EmbedInteractiveExample("pages/css/right.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>L'effet de la propriété <code>right</code> dépend de la façon dont l'élément est positionné (c'est-à-dire de la valeur de la propriété {{cssxref("position")}}) :</p>

<ul>
 <li>Quand <code>position</code> vaut <code>absolute</code> ou <code>fixed</code>, <code>right</code> indique la distance entre le bord droit de l'élément et le bord droit du bloc englobant.</li>
 <li>Quand <code>position</code> vaut <code>relative</code>, <code>right</code> indique la distance de laquelle le bord droit de l'élément est décalé vers la gauche par rapport à sa position normale.</li>
 <li>Quand <code>position</code> vaut <code>sticky</code>, <code>right</code> se comporte comme <code>relative</code> lorsque l'élément est à l'intérieur de la zone d'affichage (<em>viewport</em>) et comme <code>fixed</code> lorsque l'élément est en dehors de la zone d'affichage.</li>
 <li>Quand <code>position</code> vaut <code>static</code>, <code>right</code> n'a aucun effet.</li>
</ul>

<p>Lorsque les propriétés <code>right</code> et {{cssxref("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 <em>sur-définie.</em> Dans ce cas, la valeur de {{cssxref("left")}} est prioritaire lorsque le contenant est disposé en lecture de gauche à droite (la valeur calculée de <code>right</code> sera <code>-left</code>), et la valeur de <code>right</code> est prioritaire lorsque le contenant est disposé en lecture de droite à gauche (la valeur calculée de {{cssxref("left")}} sera <code>-right</code>).</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css  no-line-numbers">/* Valeurs de longueur */
/* Type &lt;length&gt;       */
right: 3px;
right: 2.4em;

/* Valeurs de pourcentage */
/* Type &lt;percentage&gt;      */
right: 10%;

/* Valeur avec un mot-clé */
right: auto;

/* Valeurs globales */
right: inherit;
right: initial;
right: unset;
</pre>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Une valeur de type {{cssxref("&lt;length&gt;")}} qui peut être négative, positive ou nulle et représente :
 <ul>
  <li>pour les éléments à positionnement absolu : la distance jusqu'au bord droit du bloc englobant.</li>
  <li>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é.</li>
 </ul>
 </dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} représentant le pourcentage de la largeur du bloc englobant.</dd>
 <dt><code>auto</code></dt>
 <dd>Un mot-clé qui représente :
 <ul>
  <li>pour les éléments à positionnement absolu : la position de l'élément fondé sur la propriété {{cssxref("left")}} et considère <code>width: auto</code> comme une largeur fondée sur le contenu ; ou, si <code>left</code> vaut aussi <code>auto</code>, l'élément serait positionné horizontalement comme s'il avait été un élément statique.</li>
  <li>pour les éléments à positionnement relatif : le décalage à droite de l'élément par rapport à sa position originale fondé sur la propriété {{cssxref("left")}} ou, si <code>left</code> vaut également <code>auto</code>, aucun décalage.</li>
 </ul>
 </dd>
 <dt><code>inherit</code></dt>
 <dd>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 {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;percentage&gt;")}} ou comme si elle était le mot-clé <code>auto</code>.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css; highlight:[16]">#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;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div id="exemple_3"&gt;Exemple 3&lt;/div&gt;
&lt;div id="exemple_4"&gt;Exemple 4&lt;/div&gt;
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample('Exemples', 500, 220)}}</p>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Définit <code>right</code> comme pouvant être animée.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}</td>
   <td>{{Spec2('CSS3 Positioning')}}</td>
   <td>Description du comportement pour le comportement adhérent (<em>sticky</em>).</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.right")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{cssxref("position")}},</li>
 <li>{{cssxref("left")}},</li>
 <li>{{cssxref("top")}},</li>
 <li>{{cssxref("bottom")}}</li>
</ul>