position à des éléments grâce aux classes suivantes :
.position-static;.position-relative;.position-absolute;.position-fixed;.position-sticky.
Pour rappel, les éléments sont positionnés avec position : static par défaut. Ce type de positionnement fait que les éléments sont normalement intégrés dans le flux de la page. Un élément positionné avec position : static ne pourra pas être repositionné avec les propriétés top, right, left et bottom.
Un élément positionné avec position : relative sera positionné relativement à sa position par défaut. On va utiliser les propriétés top, right, left et bottom pour déplacer ce type d’éléments relativement à leur position de départ (position par défaut).
Un élément positionné avec position : absolute ou position : fixed est retiré du flux normal et aucun espace n’est créé pour l’élément sur la page On va utiliser les propriétés top, right, left et bottom pour positionner l’élément.
Dans le cas où l’élément est positionné avec position : absolute, l’élément sera positionné par rapport à son ancêtre le plus proche qui est positionné (avec une position différente de static). Si aucun ancêtre positionné ne peut être trouvé, l’élément sera positionné par rapport au viewport.
Dans le cas où l’élément est positionné avec position : fixed, l’élément sera toujours positionné par rapport au viewport.
Finalement, un élément positionné avec position-sticky sera intégré normalement dans le flux de la page puis positionné avec top, right, left et bottom par rapport à son ancêtre de défilement le plus proche et par rapport à son bloc englobant.
Notez que les classes liées à la propriété position ne sont pas responsive. Pensez bien également à bien faire attention aux différentes interactions possibles entre les propriétés position et display lorsque vous utilisez ces classes.
See the Pen
Bootstrap 2.8.1 by Pierre (@pierregiraud)
on CodePen.
Si on veut fixer un élément contre le bord supérieur ou contre le bord inférieur de la fenêtre active, on peut également utiliser les classes .fixed-top (fixé en haut) et .fixed-bottom (fixé en bas).
See the Pen
Bootstrap 2.8.2 by Pierre (@pierregiraud)
on CodePen.
Finalement, notez que Bootstrap nous fournit également une classe .sticky-top qui va pouvoir s’avérer très intéressante. En effet, cette classe va nous permettre de fixer un élément contre le bord supérieur de la fenêtre uniquement après qu’on l’ait dépassé dans la page.
Cette classe va donc nous permettre de créer des effets intéressants dans le cas de pages longues dotées d’une barre de défilement.
See the Pen
Bootstrap 2.8.3 by Pierre (@pierregiraud)
on CodePen.
