bottom |
Bas |
|---|---|
| CSS2 |
Syntaxe
|
bottom: paramètres; |
Paramètres
| Paramètre | Description | ||
|---|---|---|---|
| paramètres | Ce paramètre de propriété permet d'indiquer la distance : | ||
| Valeur | Description | ||
| auto | Cet attribut permet d'indiquer que la distance est calculé automatiquement. | ||
| inherit | Cet attribut permet d'indiquer qu'il hérite des propriétés de la balise parente. | ||
| initial | Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | ||
| distance | Cet attribut permet d'indiquer que la distance calculé en pixels. | ||
| pourcentage% | Cet attribut permet d'indiquer que l'espacement est calculé en fonction du pourcentage de la hauteur du document. | ||
Description
Cette propriété permet d'indiquer la distance vertical d'un élément par rapport à son conteneur en se basant à partir du bas.
Remarques
- Fonctionnalité principale : La propriété bottom est utilisée pour positionner un élément par rapport à son conteneur parent lorsqu'il est en position absolue ou fixe. Elle définit la distance entre le bord inférieur de l'élément et le bord inférieur de son conteneur de référence, permettant ainsi de contrôler précisément sa position verticale.
- Utilisation avec position : La propriété bottom ne prend effet que si l'élément a une propriété position définie sur absolute, fixed ou relative. Si l'élément est en position static (la valeur par défaut), la propriété bottom est ignorée et n'a aucun effet.
- Valeurs possibles : La propriété bottom accepte différentes unités de mesure, comme les pixels (px), les pourcentages (%), les unités relatives (em, rem), ou encore les valeurs automatiques (auto). Une valeur en pixels ou en pourcentages permet de définir une distance explicite par rapport au bas du parent, tandis que auto laisse le navigateur gérer la position.
- Effet sur les éléments en position fixe : Lorsque l'élément a une position fixed, la propriété bottom place l'élément par rapport au bas de la fenêtre du navigateur Web. Cela permet de créer des éléments restant ancrés en bas de l'écran lors du défilement de la page, comme un pied de page fixe ou une barre de navigation Web.
- Interaction avec top : La propriété bottom interagit souvent avec la propriété top, bien que leur utilisation simultanée soit assez rare. Quand elles sont utilisées ensemble sur un élément en position absolue ou fixe, elles permettent de contraindre l'élément à une zone verticale spécifique, avec la priorité étant donnée aux valeurs les plus proches de l'élément.
- Valeur auto et son comportement : Lorsqu'on utilise la valeur auto pour bottom, cela permet au navigateur de calculer automatiquement la position de l'élément en fonction de ses dimensions et de celles de son parent. Cette valeur est souvent utilisée pour les éléments qui n'ont pas besoin d'être positionnés manuellement et dont la position dépend du flux normal du document.
- Utilisation dans des mises en page complexes : La propriété bottom est très utile dans les mises en page où l'on souhaite ancrer des éléments au bas de leur conteneur sans que ceux-ci n'affectent le reste du contenu. Elle est souvent utilisée dans les barres d'outils flottantes, les boîtes de dialogue ou les menus fixes, permettant un contrôle précis des éléments verticaux dans le design.
- Compatibilité des navigateurs : La propriété bottom est largement supportée par tous les navigateurs modernes, mais son comportement peut légèrement varier selon le modèle de boîte ou le contexte de positionnement. Il est donc essentiel de tester son rendu sur plusieurs dispositifs et navigateurs pour garantir une expérience utilisateur cohérente.
Exemple
L'exemple suivant permet d'afficher une barre bleu dans la bas la page sans soucis de défilement ou de message venant avant :
on obtiendra le résultat suivant :
Dernière mise à jour : Dimanche, le 20 décembre 2015