bottom
Éloigne un élément positionné du bord inférieur de son point de référence.
- Valeur initiale
auto- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- éléments positionnés (position différente de static)
- JavaScript
element.style.bottom = "24px"
Exemple
#.badge {
position: absolute;
bottom: 8px;
}<div class="stage" style="position: relative; height: 110px;">
<span class="badge box">Nouveau</span>
</div>Définition et utilisation
#La propriété bottom ne fonctionne que sur les éléments dont le position est différent de static. Elle précise à quelle distance du bord inférieur du point de référence l’élément doit se placer.
Le point de référence dépend du type de positionnement. Avec relative, l’élément se déplace par rapport à l’endroit qu’il occuperait normalement. Avec absolute, c’est l’ancêtre positionné le plus proche qui compte, avec fixed la fenêtre du navigateur, et avec sticky le bord du conteneur défilant.
Les valeurs en pourcentage se calculent à partir de la taille du point de référence. Si vous définissez à la fois bottom et top sur un élément sans taille fixe, il s’étire entre les deux bords.
Syntaxe
#bottom: auto | <longueur> | <pourcentage>;Valeurs
#- Aucun décalage de ce côté. L’élément reste là où les autres propriétés le placent.
<longueur>
Une distance fixe par rapport au bord inférieur. Toutes les unités de longueur fonctionnent, y compris les valeurs négatives.<pourcentage>
La distance, calculée en pourcentage de la taille du point de référence.
Valeurs en pratique
#auto
.demo { bottom: auto; }24px
.demo { bottom: 24px; }50%
.demo { bottom: 50%; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si le décalage ne semble pas fonctionner, vérifiez que l’élément a bien une
positiondéfinie. - Pour définir les quatre côtés à la fois, utilisez le raccourci
inset.
Entrées associées
#- positionChoisit la façon de positionner un élément : dans le flux, en relatif, en absolu, en fixe ou en collant.
- insetUn raccourci qui définit top, right, bottom et left en une seule déclaration.
- z-indexDétermine quel élément se trouve au-dessus quand des éléments se chevauchent.
- topÉloigne un élément positionné du bord supérieur de son point de référence.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.