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-toputilitaire utilise CSS position: sticky, qui n'est pas entièrement pris en charge dans tous les navigateurs.

IE11 et IE10 seront rendus position: stickyen tant que position: relative. En tant que tel, nous enveloppons les styles dans une @supportsrequête, limitant l'adhérence aux seuls navigateurs qui peuvent le rendre correctement.

<div class="sticky-top">...</div>