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
|
---
title: bottom
slug: Web/CSS/bottom
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/bottom
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>bottom</code></strong> contribue à la définition de l'emplacement vertical des <a href="/fr/docs/Web/CSS/position">éléments positionnés</a>. Elle n'a aucun effet pour les éléments non-positionnés.</p>
<div>{{EmbedInteractiveExample("pages/css/bottom.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>Pour les <strong>éléments positionnés de façon absolue</strong>, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut <code>absolute</code> ou <code>fixed</code>, la propriété <code>bottom</code> définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.</p>
<p>Pour les <strong>éléments positionnés de façon relative</strong>, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est <code>relative</code>, la propriété <code>bottom</code> définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale.</p>
<p>Pour les éléments adhérents, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} est <code>sticky</code></p>
<p>Lorsque les propriétés {{cssxref("top")}} et <code>bottom</code> sont définies et que {{cssxref("height")}} n'est pas définie ou vaut <code>auto</code> ou <code>100%</code>, les distances indiquées par {{cssxref("top")}} et <code>bottom</code> sont respectées. Dans les autres cas, si {{cssxref("height")}} est contrainte, la propriété {{cssxref("top")}} prendra le pas sur la propriété <code>bottom</code> qui sera alors ignorée.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* Valeurs de longueur */
/* Type <length> */
bottom: 3px;
bottom: 2.4em;
/* Valeurs proportionnelles à la hauteur */
/* du bloc englobant */
/* Type <percentages> */
bottom: 10%;
/* Valeurs avec un mot-clé */
bottom: auto;
/* Valeurs globales */
bottom: inherit;
bottom: initial;
bottom: unset;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code><length></code></dt>
<dd>Une longueur (type {{cssxref("<length>")}} qui représente :
<ul>
<li>La distance depuis le bord bas du bloc englobant pour <strong>les éléments positionnés de façon absolue</strong></li>
<li>Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour <strong>les éléments positionnés de façon relative </strong>.</li>
</ul>
</dd>
<dt><code><percentage></code></dt>
<dd>Une valeur de pourcentage (type {{cssxref("<percentage>")}} exprimée par rapport à la hauteur du bloc englobant.</dd>
<dt><code>auto</code></dt>
<dd>
<ul>
<li>Pour <strong>les éléments positionnés de façon absolue :</strong> la position de l'élément se base sur la propriété {{cssxref("top")}} et <code>height: auto</code> est traitée comme une hauteur basée sur la taille du contenu</li>
<li>Pour <strong>les éléments positionnés de façon relative :</strong> le décalage avec lequel l'élément est déplacé est construit à partir de la propriété {{cssxref("top")}} et si celle-ci vaut également <code>auto</code>, l'élément n'est pas déplacé verticalement.</li>
</ul>
</dd>
<dt><code>inherit</code></dt>
<dd>Cette valeur indique que la valeur est la même que la valeur calculée pour l'élément parent (qui peut ne pas être le bloc englobant). Cette valeur calculée est gérée comme si elle était une longueur, un pourcentage ou le mot-clé <code>auto</code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Exemples">Exemples</h2>
<p>Dans l'exemple qui suit, on illustre la différence de comportement de la propriété <code>bottom</code> lorsque {{cssxref("position")}} vaut <code>absolute</code> ou lorsqu'elle vaut <code>fixed</code>. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with <code>position:absolute</code> scroll with the page, while blocks positioned with <code>position:fixed</code> don't.</p>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p {
font-size:30px;
line-height:3em;
}
div.pos {
width:49%;
text-align:center;
border:2px solid #00f;
}
div#abs {
position:absolute;
bottom:0;
left:0;
}
div#fix {
position:fixed;
bottom:0;
right:0;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>
Voici <br>un<br>grand<br>grand,<br>grand,
<br>grand,<br>grand,<br>grand<br>contenu.
</p>
<div id="fix" class="pos">
<p>Fixe</p>
</div>
<div id="abs" class="pos">
<p>Absolu</p>
</div></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","300","300")}}</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('CSS2.1', 'visuren.html#choose-position', 'bottom')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>bottom</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}</td>
<td>{{Spec2('CSS3 Positioning')}}</td>
<td>Décrit le comportement pour le positionnement adhérent (<em>sticky</em>).</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("css.properties.bottom")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("position")}},</li>
<li>{{cssxref("top")}},</li>
<li>{{cssxref("left")}},</li>
<li>{{cssxref("right")}}</li>
</ul>
|
