La propriété CSS bottom
La propriété CSS bottom définit la position inférieure d'un élément en combinaison avec la propriété position. Exemples et démonstrations interactives.
La propriété CSS bottom définit la position verticale d'un élément positionné par rapport à son bloc conteneur. Elle ne fonctionne que lorsque l'élément possède une valeur position autre que static, et une valeur positive déplace le bord inférieur de l'élément vers le haut, en l'éloignant du bas de sa boîte de référence.
Remarque : la propriété bottom n'a aucun effet sur les éléments ayant position: static (valeur par défaut), il ne se passe donc rien tant que vous ne définissez pas également position.
Influence de la valeur de position
La boîte de référence à partir de laquelle bottom est calculé dépend entièrement de la valeur position de l'élément :
relative—bottomdécale l'élément par rapport à sa position normale.bottom: 20pxle déplace de 20 px vers le haut par rapport à là où il se trouverait normalement, sans affecter la mise en page des éléments environnants.absolute— l'élément est positionné par rapport à son ancêtre positionné le plus proche (un ancêtre dont lapositionn'est passtatic).bottom: 0l'ancre au bas de cet ancêtre.fixed— l'élément est positionné par rapport au viewport et reste fixe pendant le défilement de la page.sticky— l'élément se comporte commerelativejusqu'à ce que son conteneur de défilement atteigne un seuil, après quoi il se comporte commefixed.
bottom vs. top
Si top et bottom sont tous deux définis sur le même élément, top l'emporte lorsque l'élément a une hauteur fixe (pour position: absolute/fixed), car top est résolu en premier. Si la hauteur est auto, définir top et bottom ensemble étire l'élément pour remplir l'espace entre les deux décalages — un moyen pratique de rendre une boîte positionnée en absolu aussi haute que son conteneur sans spécifier de hauteur.
Valeurs en pourcentage
Un bottom en pourcentage est calculé à partir de la hauteur du bloc conteneur, et non de l'élément lui-même. Si le bloc conteneur n'a pas de hauteur explicite, les décalages en pourcentage peuvent se résoudre à 0 ou être ignorés ; préférez donc les unités de longueur (px, em, rem) lorsque la hauteur du parent est inconnue.
| Valeur initiale | auto |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter. |
| Hérité | Non. |
| Animatable | Oui. La position inférieure peut être animée. |
| Version | CSS2 |
| Syntaxe DOM | object.style.bottom = "10px"; |
Syntaxe
Syntaxe de la propriété CSS bottom
bottom: auto | length | percentage | initial | inherit;Exemple de la propriété bottom :
Exemple de la propriété CSS bottom avec la valeur position absolute
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 300px;
width: 80%;
border: 3px solid #8ebf42;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 10px;
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
The position of this div is set to relative.
<div class="absolute">This div's bottom edge is placed 10 pixels above the bottom edge of the containing element, and the position is set to absolute.</div>
</div>
</body>
</html>Résultat
Exemple de la propriété bottom avec toutes les positions :
Exemple de la propriété CSS bottom avec toutes les positions
<!DOCTYPE html>
<html>
<head>
<style>
div.parent {
position: relative;
height: 180px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
width: 50%;
bottom: 20px;
border: 3px solid #8AC007;
}
div.relative {
position: relative;
width: 50%;
bottom: 2px;
border: 3px solid #8AC007;
}
div.fixed {
position: fixed;
width: 50%;
bottom: 50px;
border: 3px solid #8AC007;
}
div.sticky {
position: sticky;
top: 0;
width: 50%;
bottom: 10px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>
<h2>Bottom property example</h2>
<div class="parent">
This div element has position: relative.
<div class="absolute"><strong>position: absolute and bottom 20px</strong>
<br />This div's bottom edge is placed 20 pixels above the bottom edge of the containing element.</div>
</div>
<br />
<div class="parent">
This div element has position: relative.
<div class="relative"><strong>position: relative and bottom 2px</strong>
<br />This div's bottom edge is placed 2 pixels above its normal position.</div>
</div>
<br />
<div class="fixed"><strong>position: fixed and bottom 50px</strong>
<br />This div's bottom edge is placed 50 pixels from the bottom of the viewport.</div>
<div class="parent">
This div element has position: relative.
<div class="sticky"><strong>position: sticky and bottom 10px</strong>
<br />This div is sticky.</div>
</div>
</body>
</html>Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| auto | Valeur par défaut. Le navigateur calcule la position du bord inférieur. | Essayer » |
| percentage | Définit la position de l'élément en pourcentage de la hauteur du bloc conteneur. | |
| length | Définit la position de l'élément en px, cm, etc. Les valeurs négatives sont autorisées. | Essayer » |
| initial | Réinitialise la propriété à sa valeur par défaut. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
Propriétés associées
Le décalage bottom est l'une des quatre propriétés de décalage de boîte qui fonctionnent conjointement avec position :
- top — définit le décalage vertical à partir du bord supérieur de la boîte de référence.
- left — définit le décalage horizontal à partir du bord gauche.
- right — définit le décalage horizontal à partir du bord droit.
Un schéma courant consiste à ancrer un élément dans un coin, par exemple position: absolute; bottom: 0; right: 0; pour fixer un badge en bas à droite de son conteneur.