Position¶
Le flux normal, ou ce que les anglophones appellent le “flow”, est la façon dont les éléments sont affichés dans une page web lorsqu’aucun style ne leur est appliqué.
Flux normal¶
- éléments block (div, p, section, etc.) ==> positionnés un à la suite de l’autre
- éléments inline (span, strong, em, etc.) ==> positionnés un à côté de l’autre
À titre de base comparative, chaque exemple sur cette page utilise le gabarit suivant 👇
- composé d'éléments en
display: block; - placés un en dessous de l’autre
- la propriété
positionde ces boites fluctue d'un exemple à l'autre afin d'illustrer la différence engendrée par cette propriété.
Un top: 15vmin; a aussi été attribué à la boite afin de mettre en évidence l'impact de position.
static¶
Par défaut, le navigateur attribue la position static à tous les éléments. La particularité principale de cette position est que les propriétés top, right, bottom, left ou encore z-index n’ont aucun impact sur ces éléments 🚫.
Cette valeur de position à pour objectif de positionner les éléments comme le ferait le code HTML sans l’intervention du CSS. On remarque donc que la propriété top n'affecte aucunement la boite
relative¶
Les éléments en position: relative; se positionnent d'abord en fonction du flux normal de la page. Ils sont ensuite déplacés relativement à cet emplacement, d'où leur nom position: relative;.
On remarque donc dans l'exemple ci-dessous que la boite est décalée d'une demi-hauteur de boite par rapport à sa position normale dans le flux.
absolute¶
Les éléments en position: absolute; ignorent complètement le flux de la page et se positionnent en fonction du parent le plus près aillant une position autre que static.
On remarque dans l'exemple ci-dessous que les éléments respectant le flux se positionnent exactement comme si la boite 2 n'existait pas (aucun espace vide entre la boite 1 et la 3). La boite 2 quant à elle se positionne par rapport au <body> qui en l'absence de parent avec une position devient sont point de référence.
fixed¶
Les éléments en position: fixed; ressemblent aux éléments en position absolute. Tout comme eux, ils ignorent le flux de la page. Cependant, plutôt que de se positionner en fonction d'un parent, ils se positionnent en fonction de la fenêtre (viewport).
On remarque dans l'exemple ci-dessous que les éléments respectant le flux se positionnent exactement comme si la boite 2 n'existait pas (aucun espace vide entre la boite 1 et la 3). La boite 2 quant à elle se positionne par rapport à la fenêtre, donc même si la page défile, la boite reste fixe.
sticky¶
Les éléments en position: sticky; ressemblent aux éléments en position static. Tout comme eux, ils se positionnent d'abord en fonction du flux normal de la page. Cependant, lorsqu'une de leurs propriétés top, right, bottom ou left correspond au défilement de la page, l'élément devient fixe.
Dans l'exemple ci-dessous, la boite 2 n'est à priori pas affectée par la propriété top. Cependant, lorsque la page défile et que la boite se trouve à une distance du sommet équivalente à la valeur de sa propriété top, celle-ci devient fixe et arrête de défiler avec le reste de la page.
Exercices¶
Cat in the box - Niveaux 1 à 13
Utilisez la propriété position afin de déplacer les chats dans leurs boites respectives.
Cat in the box - Niveaux 1 à 13