Aller au contenu

1NSI : CSS -> Position⚓︎

La propriété CSS position détermine la manière dont un élément HTML (typiquement une balise) est positionné sur la page web, ou relativement à un autre item de la page. Par défaut, position est défini avec la valeur static, qui signifie que les éléments de la page (web) sont affichés dans l'ordre où ils apparaissent dans le document (du code source), mais voyons quelques autres styles de position:

STATIC⚓︎

position: static; : l'élément s'affiche sur la page web dans l'ordre où il apparaît dans le flux du document;

Danger

Les propriétés top, right, bottom, left et/ou z-index n'ont aucun effet lorsqu'utilisées avec position: static;

RELATIVE⚓︎

position: relative; : Similaire à static mais compatible avec top, right, bottom, left, et z-index.

ABSOLUTE⚓︎

position: absolute; : L'élément est positionné relativement/par rapport à son premier ancêtre non static. Compatible avec top, right, bottom, left, et z-index (de même que relative).

FIXED⚓︎

position: fixed; : Similaire à absolute, mais positionné relativement à la fenêtre du navigateur. Le scroll n'a aucun effet sur cet élément.

STICKY⚓︎

position:sticky; (sticky 🇬🇧 = collant 🇫🇷) L'élémént est :

  • Initialement positionné (au chargement de la page) comme position:relative;
  • Ensuite, cet élément est fixé à cette position de manière insensible au scroll