Le positionnement en CSS

La propriété « position » en CSS est très puissante, elle va nous permettre de déterminer un type de positionnement pour nos éléments. Associé aux propriétés « top », « bottom », « left » et « right », on va pouvoir positionner nos éléments de différentes manières.

I) Les valeurs de la propriété position

La propriété « position » peut prendre plusieurs valeurs différentes.

1) Static

C’est la position par défaut, le positionnement de l’élément dépend de son contenu. L’élément est placé à la suite des autres. Les propriétés « top », « bottom », « left » et « right » ne sont pas pris en compte.

2) Relative

L’élément est positionné normalement en fonction de son contenu, mais les propriétés « top », « bottom », « left » et « right » agissent sur son positionnement.

Par exemple, si nous voulons que notre élément soit un peu plus haut que sa position actuelle, il faudra donner à la propriété « top » — 10px par exemple.

Ces propriétés n’agissent pas sur le positionnement des autres éléments, c’est-à-dire qu’ils ne vont pas être repositionnés en fonction de notre élément.

3) Absolute

L’élément n’a pas un comportement normal, il est retiré du flux, c’est-à-dire qu’il va se placer par-dessus les autres éléments. Il est positionné par rapport à son élément parent le plus proche ou par rapport à l’élément racine.

Les propriétés « top », « bottom », « left » et « right » vont alors déterminer le positionnement de l’élément par rapport à l’élément parent.

Par exemple, si on veut que l’élément soit positionné en haut à droite de l’élément parent ou de l’élément racine (de la page donc) il suffira de donner une valeur de 0 aux propriétés « top » et « right ».

4) Fixed

L’élément est retiré du flux tout comme avec absolute. La seule différence avec absolute, c’est que l’élément sera positionné par rapport au viewport, c’est-à-dire, la taille de la fenêtre de navigation.

Pour faire simple, si un élément est fixed, il restera affiché à l’écran et suivra donc le défilement de la page.

Il y a quelques cas particuliers, je vous invite à aller checker la documentation pour en savoir plus.

5) Sticky

L’élément est positionné normalement, comme avec relative. La seule différence est que le positionnement d’un élément sticky dépend du premier élément parent possédant une caractéristique de défilement ou de scrolling en anglais.

Un élément sticky va avoir une position relative au début puis fixe à partir d’un certain point sera franchi.

Par exemple, avec une valeur de 10px à la propriété « top », l’élément se comportera de manière relative jusqu’à ce que le viewport défile au point que l’élément est à moins de 10px du haut.

Voyons en un peu plus au sujet des propriétés « top », « bottom », « left » et « right ».

II) Top, Left, Bottom et Right

Comme dit précédemment, le positionnement sera déterminer par la propriété « position » et sera complété par les propriétés « top », « bottom », « left » et « right ».

Hormis le positionnement static, ces propriétés permettent donc de déterminer la position d’un élément dans une page web.

Vous avez déjà vu dans cet article que donner une valeur de 0 aux propriétés « top » et « right » permet de mettre en élément en haut à droite de la page ou d’un élément en fonction de la valeur de sa propriété « position ».

On a aussi vu qu’on peut donner plusieurs valeurs à ces propriétés, généralement en pixel, qu’elles soient positives ou négatives d’ailleurs.

Les unités de viewports qu’on a vu ici peuvent aussi être appliqué à ces propriétés.

Mais il y a une autre propriété qu’on n’a pas encore vue dans cet article, le « z-index ».

Le « z-index » permet de déterminer l’ordre d’affiche en cas de chevauchement de deux éléments. Cette propriété va donc nous permettre de choisir quel élément s’affichera au-dessus d’un autre.

Donc, l’élément possédant la valeur la plus élevée à la propriété, «z-index » sera affiché en premier.

Par exemple, l’élément A à un « z-index » de 10 et l’élément B à un « z-index » de 100, c’est l’élément B qui sera devant l’élément A.

Bref, il y aurait d’autres choses à dire, mais je vous laisse aller lire la doc si cela vous intéresse.