Superposition des éléments
Positionnement
Lorsque nous voulons mettre des éléments les uns par dessus les autres en CSS, nous devons immédiatement penser à la propriété position. Cette prorpriété permet de faire de nombreuses choses, mais principalement permettre de superposer des éléments ou de les aligner par rapport à d'autres éléments. Il ne faut pas confondre cette propriété avec la propriété display, qui elle change la méthode d'affichage d'un élément.
Il existe 5 méthodes de positionnement:
- static
- relative
- absolute
- fixed
- sticky
La plupart des méthodes de positionnement utilise les propriétés top, right, bottom et left pour déplacer l'élément dans la page web en fonction du côté spécifié. Ces propriétés accepte une valeur ayant n'importe quel unité de mesure de distance. On favorisera toutefois les rem et px comme d'habitude.
Position statique
La position static est le mode de positionnement par défaut. Ce positionnement ne fait rien de spécial. Il assure simplement que les éléments suivent le flux normal de la page. Puisque c'est la valeur par défaut, vous aurez très rarement besoin de spécifier cette valeur. Dans ce mode de positionnement, les propriétés top, right, bottom et left ne font rien.
Position relative
La position relative permet de déplacer un élément par rapport à sa position originale dans le flux de la page Web à l'aide des propriétés top, right, bottom et left. Un côté étonnement intéressant du mode d'affichage relatif est que si les propriétés de déplacement ne sont pas spécifié, l'élément garde sa place normale dans le flux de la page.
Dans l'exemple ci-dessus, on déplace l'élément .position de 3rem à partir de sa gauche. Nous le déplaçons aussi de -1rem à partir de son haut, ce qui veut dire qu'on le déplace vers le haut à partir de son haut. Une valeur positive aurait poussée l'élément vers le bas. Dans un positionnement relative, une valeur de top: -1rem; et bottom: 1rem; équivaut au même déplacement.
Position absolue
Le mode de positionnement absolute permet de déplacer un élément dans la page web par rapport à son premier parent le plus proche qui a un positionnement autre que static. Puisque tous les éléments d'une page web ont par défaut un mode de positionnement statique, on l'utilisera donc conjointement avec des conteneurs qui ont un positionnement relative.
Si aucun des parents d'un élément ayant un positionnement absolute n'a de position autre que static, cet élément sera positionné par rapport au <body> de la page, ce qui n'est généralement pas voulu.
L'exemple ci-dessus apporte son lot d'information:
- On peut remarquer que le <div> bleu se place automatiquement en haut à gauche du conteneur et ce, même s'il était placé après la boîte rouge. C'est parce que les éléments en position absolue sortent du flux naturel d'une page web et laissent ainsi leur place aux autres éléments.
- Comme mentionné ci-dessus, les éléments en position absolute sortent du flux naturel de la page. Ils sont donc positionné par dessus les éléments de base de votre page. Si vous rétrécissez la fenêtre de votre navigateur, vous verrez donc que la boîte rouge ira se poser par dessus la boîte bleu.
- On voit que les propriétés bottom et right représente les côtés côté du conteneur. En mettant une valeur de bottom: 0; on indique que l'on place l'élément absolue au bas de son conteneur relatif.
Poistion fixe
Si vous désirez positionner un élément par rapport à la fenêtre de votre navigateur, vous utiliserez le mode de positionnement fixed. Ce mode de positionnement est similaire au positionnement absolute, mais au lieu de placer l'élément en fonction d'un conteneur, l'élément est positionné en fonction de la fenêtre du navigateur web. L'élément affecté reste donc à la même place dans l'écran même quand on fait défiler la page.
Comme pour la position absolue, puisque la position fixe se met par dessus d'autres élément de votre page, il faut s'assurer de ne pas cacher d'éléments importants dans la page. Pour cette raison, il est de moins en moins fréquent de voir ce type de positionnement dans les sites web plus moderne.
Positionnement collant
La position sticky permet d'avoir un mixe entre le positionnement relative et fixed. Il permet à l'élément de rester à sa place dans la page jusqu'à ce que le défilement de la page atteigne une certaine valeur. Après ça, il utilise le positionnement fixed.
Il peut être pratique pour des menus qui défile sur la page ou pour des boutons pour remonter en haut de la page, mais ne vois autrement pas beaucoup d'utilisation. Il est difficile à utiliser. Je vous suggère donc de faire attention si vous croyez en avoir besoin.
Chevauchementa
Si vous jouez un peu avec les positionnements autre que static, vous rencontrerez probablement des chevauchements entre les éléments HTML. Il arrive parfois que le chevauchement ne se fasse pas de la façon que vous voulez. Par exemple, un élément pourrait apparaître en dessous d'un autre alors que vous voulez qu'il apparaîsse au-dessus. Dans ce cas, la propriété z‑index vous permet de définir un ordre de priorité pour l'affichage. Plus le z‑index est grand, plus il va apparaître au-dessus des autres éléments. Le contraire est aussi valide. Un petit z‑index affichera les éléments en dessous des autres.
Le calcul de la position par le z-index est plus complexe que ce qu'elle en a l'air. Si vous avez des problèmes de chevauchement qui ne se règle pas, je vous conseille d'aller lire sur le "Stacking Context". Vous pouvez en apprendre d'avantage ici: