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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
---
title: top
slug: Web/CSS/top
tags:
- CSS
- Positionnement
- Propriété
- Reference
translation_of: Web/CSS/top
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>top</code></strong> définit une partie de la position des éléments positionnés, elle n'a aucun effet pour les éléments non-positionnés.</p>
<div>{{EmbedInteractiveExample("pages/css/top.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>top</code> dépend de la façon dont l'élément est positionné (autrement dit, il dépend de la valeur de la propriété {{cssxref("position")}}) :</p>
<ul>
<li>Pour les éléments qui sont positionnés de manière absolue ({{cssxref("position")}}<code>: absolute</code> ou {{cssxref("position")}}<code>: fixed</code>), cette propriété définit la distance entre le bord haut de la marge (<em>margin</em>) de l'élément et le bord haut du bloc englobant (il faut que le bloc englobant ait <code>position: relative</code>).</li>
<li>Lorsque <code>position</code> vaut <code>relative</code>, cela définit la grandeur du déplacement avec laquelle l'élément est placé en dessous de sa position normale.</li>
<li>Lorsque <code>position</code> vaut <code>sticky</code>, la propriété <code>top</code> se comporte comme avec <code>relative</code> lorsque l'élément se situe à l'intérieur de la zone d'affichage (<em>viewport</em>) et elle se comporte comme <code>fixed</code> lorsque l'élément est à l'extérieur de la zone d'affichage.</li>
<li>Lorsque <code>position</code> vaut <code>static</code>, la propriété <code>top</code> n'a aucun effet.</li>
</ul>
<p>Lorsque <code>top</code> et {{cssxref("bottom")}} sont utilisés tous les deux, tant que {{cssxref("height")}} n'est pas définie ou ne vaut pas <code>auto</code> ou <code>100%</code>, les distances introduites par <code>top</code> et {{cssxref("bottom")}} seront respectées. Sinon, si {{cssxref("height")}} est contrainte d'une certaine façon, la propriété <code>top</code> prendra le pas sur {{cssxref("bottom")}} qui sera ignorée.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css">/* Valeur de longueur */
/* Type <length> */
top: 3px;
top: 2.4em;
/* Valeur en pourcentages */
/* Relative à la hauteur du bloc englobant */
/* Type <percentages> */
top: 10%;
/* Avec un mot-clé */
top: auto;
/* Valeur globale */
top: inherit;
top: initial;
top: unset;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><length></code></dt>
<dd>Une valeur négative, nulle ou positive du type {{cssxref("<length>")}} qui représente :
<ul>
<li>La distance depuis le bord haut du bloc englobant pour les <em>éléments positionnés de façon absolue</em></li>
<li>Le décalage avec lequel l'élément est déplacé vers le bas (relativement à sa position normale) pour <em>les éléments positionnés de façon relative</em>.</li>
</ul>
</dd>
<dt><code><percentage></code></dt>
<dd>Une valeur du type {{cssxref("<percentage>")}} qui est relative à la hauteur du bloc englobant.</dd>
<dt><code>auto</code></dt>
<dd>Un mot-clé qui représente :
<ul>
<li>Pour les éléments positionnés de façon absolue, la position de l'élément en fonction de la propriété {{cssxref("bottom")}} et qui traite <code>height: auto</code> comme une hauteur basée sur le contenu. Si <code>bottom</code>vaut également <code>auto</code>, l'élément est positionné verticalement comme s'il avait été un élément statique.</li>
<li>Pour les éléments positionnés de façon relative, le décalage de l'élément par rapport à sa position originale, basée sur la propriété {{cssxref("bottom")}}. Si <code>bottom</code> vaut également <code>auto</code>, aucun décalage n'est appliqué.</li>
</ul>
</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<h3 id="Positionnement_relatif">Positionnement relatif</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>
<p>Lorem ipsum et tralala normal</p>
<p class="relatif">Lorem ipsum et tralala relatif</p>
<p>Lorem ipsum et tralala normal</p>
</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">div {
border: 2px black dashed;
}
p.relatif {
position: relative;
top: 5em;
border: 2px black solid
}
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Positionnement_relatif","100%","200")}}</p>
<h3 id="Positionnement_absolu">Positionnement absolu</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div>
<p>Lorem ipsum et tralala normal</p>
<p class="absolu">Lorem ipsum et tralala absolu</p>
<p>Lorem ipsum et tralala normal</p>
</div>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">div {
border: 2px black dashed;
}
p.absolu {
position: absolute;
top: 5em;
border: 2px black solid;
}</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Positionnement_absolu","100%","100%")}}</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 Transitions', '#animatable-css', 'top')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>top</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Positioning', '#propdef-top', 'top')}}</td>
<td>{{Spec2('CSS3 Positioning')}}</td>
<td>Description du comportement pour le positionnement adhérent (<em>sticky</em>)</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visuren.html#propdef-top', 'top')}}</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>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.top")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("position")}}</li>
<li>{{cssxref("bottom")}}</li>
<li>{{cssxref("height")}}</li>
<li>{{cssxref("left")}}</li>
<li>{{cssxref("right")}}</li>
<li><a href="/fr/Apprendre/CSS/Les_bases/La_disposition#Le_positionnement">Les bases de CSS : la disposition et le positionnement</a></li>
</ul>
|
