1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
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>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 <length> */
right: 3px;
right: 2.4em;
/* Valeurs de pourcentage */
/* Type <percentage> */
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><length></code></dt>
<dd>Une valeur de type {{cssxref("<length>")}} 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><percentage></code></dt>
<dd>Une valeur de type {{cssxref("<percentage>")}} 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("<length>")}}, {{cssxref("<percentage>")}} 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"><div id="exemple_3">Exemple 3</div>
<div id="exemple_4">Exemple 4</div>
</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>
|
