Positions

Static

La position statique est la position par défaut de tout élément HTML. Les éléments avec cette position sont disposés selon le flux normal du document. Ils ne sont pas affectés par les propriétés top, bottom, left et right.

Relative

La position relative décale un élément de sa position normale. Vous pouvez utiliser les propriétés top, bottom, left et right pour ajuster l'emplacement de l'élément par rapport à sa position normale. Cet ajustement n'affecte pas les autres éléments, car l'espace initial est toujours réservé pour l'élément.

Absolute

La position absolue positionne un élément par rapport à son premier ancêtre positionné (parent avec une position autre que static) ou par rapport au document lui-même (body) si aucun ancêtre n'est positionné. Cela permet de créer des éléments qui peuvent se superposer à d'autres éléments.

Les propriétés top, bottom, left et right sont utilisées pour définir la position absolue. Contrairement à la position relative, l'élément va perdre sa place d'origine dans le flux.

Sticky

La position sticky est un peu comme une combinaison de relative et fixed. L'élément est positionné en fonction de la position de défilement de la page. Il agit comme une position relative jusqu'à ce que vous atteignez un certain point de défilement, puis il se comporte comme une position fixe.

En position sticky, l’élément va suivre le scroll en restant figer sur le haut de son conteneur. La propriété top est obligatoire pour que celui-ci fonctionne.

Fixed

La position fixe positionne un élément par rapport à la fenêtre du navigateur. Cet élément reste à la même position même lorsque vous faites défiler la page. C'est utile pour les éléments comme les barres de navigation qui doivent rester visibles en tout temps.

En résumé

• Static => position de base
• Relative => garde sa position originale dans le flux
• Absolute => perd sa position originale dans le flux
• Sticky => suit le scroll et reste figé sur le conteneur
• Fixed => reste figé dans le viewport

Exercices