Position
Utilisez ces utilitaires abrégés pour configurer rapidement la position d'un élément.
Valeurs communes
Des classes de positionnement rapide sont disponibles, bien qu'elles ne soient pas réactives.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Plateau fixe
Positionnez un élément en haut de la fenêtre, d'un bord à l'autre. Assurez-vous de comprendre les ramifications de la position fixe dans votre projet ; vous devrez peut-être ajouter du CSS supplémentaire.
<div class="fixed-top">...</div>
Fond fixe
Positionnez un élément au bas de la fenêtre, d'un bord à l'autre. Assurez-vous de comprendre les ramifications de la position fixe dans votre projet ; vous devrez peut-être ajouter du CSS supplémentaire.
<div class="fixed-bottom">...</div>
Haut collant
Positionnez un élément en haut de la fenêtre, d'un bord à l'autre, mais seulement après l'avoir fait défiler. L' .sticky-top
utilitaire utilise CSS position: sticky
, qui n'est pas entièrement pris en charge dans tous les navigateurs.
IE11 et IE10 seront rendus position: sticky
en tant que position: relative
. En tant que tel, nous enveloppons les styles dans une @supports
requête, limitant l'adhérence aux seuls navigateurs qui peuvent le rendre correctement.
<div class="sticky-top">...</div>