bottom
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété bottom
contribue à la définition de l'emplacement vertical des éléments positionnés. Elle n'a aucun effet pour les éléments non-positionnés.
Exemple interactif
position
vaut absolute
ou fixed
, la propriété bottom
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.
Pour les éléments positionnés de façon relative, c'est-à-dire ceux dont la valeur de propriété position
est relative
, la propriété bottom
définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale.
Pour les éléments adhérents, c'est-à-dire ceux dont la valeur de la propriété position
est sticky
Lorsque les propriétés top
et bottom
sont définies et que height
n'est pas définie ou vaut auto
ou 100%
, les distances indiquées par top
et bottom
sont respectées. Dans les autres cas, si height
est contrainte, la propriété top
prendra le pas sur la propriété bottom
qui sera alors ignorée.
Syntaxe
/* 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;
Valeurs
<length>
-
Une longueur (type
<length>
qui représente :- La distance depuis le bord bas du bloc englobant pour les éléments positionnés de façon absolue
- Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour les éléments positionnés de façon relative.
<percentage>
-
Une valeur de pourcentage (type
<percentage>
exprimée par rapport à la hauteur du bloc englobant. auto
-
Indique pour :
- Les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété
top
etheight: auto
est traitée comme une hauteur basée sur la taille du contenu - Les éléments positionnés de façon relative : le décalage avec lequel l'élément est déplacé est construit à partir de la propriété
top
et si celle-ci vaut égalementauto
, l'élément n'est pas déplacé verticalement.
- Les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété
inherit
-
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é
auto
.
Définition formelle
Valeur initiale | auto |
---|---|
Applicabilité | éléments positionnés |
Héritée | non |
Pourcentages | se rapporte à la hauteur du bloc contenant |
Valeur calculée | si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto |
Type d'animation | une longueur, pourcentage ou calc() ; |
Syntaxe formelle
bottom =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Exemples
Dans l'exemple qui suit, on illustre la différence de comportement de la propriété bottom
lorsque position
vaut absolute
ou lorsqu'elle vaut fixed
. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with position:absolute
scroll with the page, while blocks positioned with position:fixed
don't.
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;
}
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>
Résultat
Spécifications
Specification |
---|
CSS Positioned Layout Module Level 3 # insets |
Compatibilité des navigateurs
BCD tables only load in the browser