Le principe d’affichage des éléments composants une page HTML est assez simple. Ils s’enchainent en se poussant les uns à la suite des autres sur un axe vertical en suivant l’ordre d’écriture code. C’est ce que nous appelons le flux. La propriété CSS position permettra de modifier ce comportement en s’appuyant sur une autre référence que le flux.
On va ainsi pouvoir positionner un élément par rapport à un nouveau repère (abscisse / ordonnée), défini par la valeur que nous donnerons à cette propriété position. Ainsi l’élément pourra être positionné par rapport à lui même, à un élément parent ou à la fenêtre de notre navigateur à l’aide des propriétés top, left, bottom et right.
Le fonctionnement de la propriété position
Il existe 5 valeurs possibles à la propriété position :
- static
- relative
- absolute
- fixed
- sticky
Le type de positionnement défini pour l’élément va servir à définir un repère de référence et va donc affecter son comportement l’endroit ou il sera affiché.
Une fois le type de positionnement défini avec position, nous allons pouvoir positionner un élément à un endroit précis aux propriétés top, left, bottom et right.
Ces quatre propriétés vont servir à définir un point de référence au positionnement et à donner des coordonnées à ce point dans le repère de référence. De manière générale, nous définiront le positionnement horizontale de l’objet en choisissant soit la propriété left soit la propriété right. De la même façon, pour définir son positionnement vertical, nous choisiront entre les propriétés top ou bottom.
Les valeurs de la propriété position
static
La valeur static est la valeur par défaut de l’élément. C’est elle qui défini qu’un élément est naturellement positionné dans le flux de la page. Il s’agit de la seule valeur qui ne soit pas impacté par les propriétés top, left, bottom et right. Elle servira dans des cas spécifiques nécessitant de redéfinir sa valeur initiale à un élément.
relative
Attribuer une position : relative à un élément va positionner l’élément dans le flux normal de la page contrairement à la valeur static, l’élément pourra être impacté par par les propriétés top, left, bottom et right. Les valeurs que nous leurs donneront déplaceront l’élément par rapport à lui même. Cependant, ce déplacement n’impactera pas les éléments voisin.
absolute
Un élément positionné avec position: absolute va être positionné par rapport à son parent le plus proche positionné (avec une valeur de position différente de static).
Si aucun parent positionné n’est trouvé, alors l’élément sera positionné par rapport à l’élément racine de la page, le body.
Le point de référence pour les propriétés top, left, bottom et right va ainsi être le côté de l’élément parent liée à la propriété (côté gauche pour left, supérieur pour top , etc.).
De plus, un élément positionné avec position : absolute va être retiré du flux normal de la page. Cela signifie et implique que l’espace initialement attribué à un élément au positionnement absolu (espace attribué selon le flux normal de la page) va être occupé par les éléments suivants.
Un élément positionné avec position: absolute va ainsi pouvoir se placer par-dessus d’autres éléments.
fixed
Le positionnement fixe est très proche du positionnement absolu. Un élément positionné avec position: fixed va également être retiré du flux de la page et l’espace qui lui était attribué selon le flux normal de la page va également pouvoir être utilisé par d’autres éléments.
Le positionnement fixe est très proche du positionnement absolu. Un élément positionné avec position: fixed va également être retiré du flux de la page et l’espace qui lui était attribué selon le flux normal de la page va également pouvoir être utilisé par d’autres éléments.
La seule différence entre position: fixed et position: absolute est que l’élément ne va plus être positionné par rapport à son parent le plus proche mais par rapport au viewport, c’est-à-dire par rapport à la fenêtre visible. C’est ce que nous pouvons voir pour certains éléments d’information visible dans une page web quelque soit la position du scroll.
sticky
La dernière valeur de la propriété CSS position est la valeur sticky. Un élément positionné avec position: sticky sera d’abord positionné selon le flux normal de la page puis va pouvoir être décalé de manière similaire à un élément positionné de manière relative. Les éléments suivants ne verront pas leur position changée : ils seront toujours placé « comme si » l’élément positionné avec position: sticky occupait sa place d’origine.
Ce cas peut être intéressant pour bloquer un élément placé naturellement au milieu de notre page lors du déroulement pour le garder définitivement visible, ce peut être le cas d’une barre de navigation par exemple.
La propriété z-index
Lorsqu’un élément est positionné, nous pouvons souvent constater un effet de superposition. La propriété z-index est là pour permettre de contrôler ce phénomène en définissant l’ordre de profondeur d’affichage de notre élément. Cette propriété devra être renseigné à l’aide d’une valeur numérique entière ( ex : 2) qui définira l’ordre de profondeur.
Ainsi un élément défini en position fixed, pourra accepter la règle z-index:200; pour passer par dessus les éléments qui l’entourent.