Les positions en CSS

Il existe cinq mots-clés que l'on peut utiliser avec la propriété CSS position :

position: relative;
position: absolute;
position: fixed;
position: sticky;
position: static;

Attardons-nous sur les trois premières.

Position fixed

Un élément positionné en fixed sortira du flux de la page et viendra se positionner "coller" en haut de la page. Ainsi, lors du scroll de la page, l'élément sera toujours visible à la même position.

Attention, le fait que l'élément positionné ainsi ne fasse plus parti du flow de la page, fera remonté tous les autres éléments suivants en haut. Autrement dis, la page se comporte comme l'élément fix n'existait pas en terme de place. Il pourra ainsi cacher les éléments qui viennent ensuite. Si l'on prend l'exemple d'une barre de navigation qui serait fixé en haut, une des solutions serait d'appliquer une margin-top au body de la même hauteur que la barre.

Position relative

Un élément positionné en relative fait encore partie du flux de la page. En attribuant une valeur aux propriétés top, right, bottom ou left, on peut ainsi le déplacer.

À noter que le déplacement se fera par rapport à sa position de départ. Le décalage n'aura pas d'incidence sur les autres éléments.

Position absolute

Un élément en position absolute sort du flux de la page. Il sera positionné par rapport à l'ancêtre le plus proche positionné de façon relative, toujours en jouant avec les valaurs que l'on peut attribuer à top, right, bottom ou left.
Si aucun de ces ancêtres n'a de position relative, alors il sera positionné par rapport au body.

Différences entre absolute et fixed

Prenons l'exemple d'un bouton back to top.

Nous avons deux choix :

  • soit le placé en bas de la page en position absolute. Il sera toujours placé au même endroit, peu importe la longueur de notre page,
  • ou le placé en fixed, et ainsi le mettre à disposition peu importe notre position dans la page.