Positionnement

1) position: static

Valeur par défaut. L’élément reste dans le flux naturel et ne peut pas être déplacé avec top, left, right ou bottom.

.box {
  position: static;
}

2) position: relative

L’élément reste dans le flux mais peut être décalé visuellement. Il garde son espace d’origine et peut servir de référence pour un enfant en absolute.

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

3) position: absolute

L’élément est retiré du flux et se positionne par rapport au premier parent positionné (relative, absolute, fixed, sticky). Sinon, il se positionne par rapport au viewport.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

4) position: fixed

L’élément est fixé par rapport au viewport et reste visible même lors du défilement.

.menu {
  position: fixed;
  top: 0;
  left: 0;
}

5) position: sticky

L’élément se comporte comme un élément normal (static) jusqu’à ce qu’il atteigne une position définie (top, left, etc.). Une fois ce seuil atteint, il devient fixe et reste collé à cette position tant que son parent est visible.

.header {
  position: sticky;
  top: 0;
}

Résumé

static : reste dans le flux, comportement normal

relative : reste dans le flux, peut être décalé

absolute : retiré du flux, dépend d’un parent positionné

fixed : retiré du flux, fixé à l’écran

sticky : entre static et fixed selon le scroll