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
|
---
title: <position>
slug: Web/CSS/position_value
tags:
- CSS
- Reference
- Type
translation_of: Web/CSS/position_value
original_slug: Web/CSS/Type_position
---
<div>{{CSSRef}}</div>
<p>Le type de donnée CSS <strong><code><position></code></strong> définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur <code><position></code>, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<p>On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera <img alt="" src="https://mdn.mozillademos.org/files/12215/position_type.png" style="float: left; height: 230px; width: 362px;"><code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).</p>
<p>Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("<percentage>")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).</p>
<p>Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est <code>center</code>.</p>
<h2 id="Valeurs">Valeurs</h2>
<pre class="brush:css">/* Syntaxe avec une valeur */
<var>mot-clé</var> /* Le côté depuis lequel décaler, on centrera sur l'autre axe*/
<var><length></var> ou <var><percentage></var> /* La position sur l'axe */
/* Syntaxe avec deux valeurs */
<var>mot-clé</var> <var>mot-clé</var> /* Un mot-clé pour chaque direction, l'ordre n'est pas important */
<var>mot-clé</var> <var>valeur</var> /* La valeur indique le décalage par rapport au côté indiqué par le mot-clé */
<em>valeur</em> <em>mot-clé</em> /* Une valeur pour le décalage horizontal et un mot-clé pour le décalage vertical */
<em>valeur</em> <em>valeur</em> /* Une valeur pour chaque composante du décalage */
/* Syntaxe avec quatre valeurs */
<em>mot-clé</em> <em>valeur</em> <em>mot-clé</em> <em>valeur</em> /* Chaque valeur indique le décalage par rapport au mot-clé qui le précède */
</pre>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">[
[ left | center | right ] || [ top | center | bottom ]
|
[ left | center | right | <length> | <percentage> ]
[ top | center | bottom | <length> | <percentage> ]?
|
[ [ left | right ] [ <length> | <percentage> ] ] &&
[ [ top | bottom ] [ <length> | <percentage> ] ]
]
</pre>
<h2 id="Interpolation">Interpolation</h2>
<p>Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("<timing-function>")}}) et le point se déplacera donc sur une ligne.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
background-color: #FFEE99;
background-repeat: no-repeat;
width: 300px;
height: 80px;
margin-bottom: 12px;
}
.exemple{
background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
// Ici un exemple de valeur <position>
background-position: 2.5cm bottom;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="exemple">Exemple</div></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', 120, 200)}}</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">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Values', '#position', '<position>')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de <code><position></code> qui doit être utilisée.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#position', '<position>')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td><code><position></code> est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#background-position', '<position>')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td><code><position></code> est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
<p>{{Compat("css.types.position")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/Valeurs_et_unités_CSS">Valeurs et unités en CSS</a></li>
<li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Tutoriel - Introduction aux valeurs et unités CSS</a></li>
<li>{{cssxref("background-position")}}</li>
<li>{{cssxref("radial-gradient","radial-gradient()")}}</li>
<li>{{cssxref("conic-gradient","conic-gradient()")}}</li>
</ul>
|
