Revision 465187 of right

  • Revision slug: CSS/right
  • Revision title: right
  • Revision id: 465187
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

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 {{ Cssxref("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 {{ cssxref("left") }} sont à la fois définies, la position de l'élément est sur-définie. Dans ce cas, la valeur de {{ cssxref("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 {{ cssxref("left") }} est égal à -right).

{{cssbox("right")}}

Syntaxe

Syntaxe formelle : {{csssyntax("right")}}
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 {{xref_csslength()}} 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 {{xref_csspercentage()}} 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é {{Cssxref("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é {{Cssxref("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()}}, {{xref_csspercentage()}} ou le mot-clé auto.

Exemples

{{ CSSLiveSample("css-positioning.html") }}

#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
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}} {{Spec2('CSS3 Transitions')}} Définit right comme animable.
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}} {{Spec2('CSS2.1')}}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 {{ CompatGeckoDesktop("1") }} 5.5 5.0 1.0
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 1.0 {{ CompatGeckoMobile("1") }} 6.0 6.0 1.0

Voir également

{{CSS_Reference:Position}}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>right</code> définie une partie de la position des éléments.</p>
<p>Dans le cas des éléments positionnés de manière absolue (ceux avec {{ Cssxref("position") }}<code>: absolute</code> ou <code>position: fixed</code>), 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.</p>
<p>La propriété <code>right</code> n'a aucun effet sur les éléments non-positionnés.</p>
<p>Lorssque les propriétés <code>right</code> et {{ cssxref("left") }} sont à la fois définies, 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 (c'est à dire que <code>right</code> est égal à <code>-left</code>), et la valeur de <code>right</code> est prioritaire lorsque le contenant est disposé en lecture de droit à gauche (c'est à dire que {{ cssxref("left") }} est égal à <code>-right</code>).</p>
<p>{{cssbox("right")}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="twopartsyntaxbox">
<a href="/fr/docs/CSS/Syntaxe_de_d%C3%A9finition_des_valeurs" title="Syntaxe de définition des valeurs">Syntaxe formelle</a> : {{csssyntax("right")}}
</pre>
<pre class="eval">
right: 3px         /* valeurs de type &lt;length&gt; */
right: 2.4em

right: 10%         /* valeur de type &lt;percentage&gt;, fait référence à la largeur du block contenant */

right: auto

right: inherit
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
  <dt>
    <code>&lt;length&gt;</code></dt>
  <dd>
    Une valeur de type {{xref_csslength()}} 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 contenant.</li>
      <li>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é.</li>
    </ul>
  </dd>
  <dt>
    <code>&lt;percentage&gt;</code></dt>
  <dd>
    Une valeur de type {{xref_csspercentage()}} représentant le pourcentage de la largeur du bloc contenant, utilisé comme décrit dans le <a href="/fr/docs/CSS/right#R.C3.A9sum.C3.A9" title="Résumé">résumé</a>.</dd>
  <dt>
    <code>auto</code></dt>
  <dd>
    Est un mot-clé qui représente :<!-- br-->
    <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.</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>
    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()}}, {{xref_csspercentage()}} ou le mot-clé <code>auto</code>.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>{{ CSSLiveSample("css-positioning.html") }}</p>
<pre class="eval">
#example_3 {
&nbsp;&nbsp;width: 600px;
&nbsp;&nbsp;height: 400px;
&nbsp;&nbsp;background-color: #FFC7E4;
&nbsp;&nbsp;position: relative;
&nbsp;&nbsp;top: 20px;
&nbsp;&nbsp;left: 20px;
}

#example_4 {
&nbsp;&nbsp;width:200px;
&nbsp;&nbsp;height:200px;
&nbsp;&nbsp;background-color: #FFD7C2;
&nbsp;&nbsp;position:absolute;
&nbsp;&nbsp;bottom:10px;
&nbsp;&nbsp;right: 20px;
}</pre>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">Statut</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 animable.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1") }}</td>
        <td>5.5</td>
        <td>5.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>1.0</td>
        <td>{{ CompatGeckoMobile("1") }}</td>
        <td>6.0</td>
        <td>6.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<p>{{CSS_Reference:Position}}</p>
Revert to this revision