Positionner des éléments
On peut aussi modifier la position des éléments de plusieurs façons, ça peut être pratique pour vraiment adapter un contenu sur mesure.
Je ne vois pas vraiment ce que tu veux dire.Position static
Et bien par défaut, les éléments sont tous positionnés en "static" c'est à dire qu'il suivent normalement le flux de la page.
Le flux?!?Et bien si on écrit un <div> il va se positionner en haut à gauche, le div suivant se positionnera en dessous du premier, alors qu'avec un span qui est un élément inline, ils se positionneront l'un à côté de l'autre. On va toujours du haut vers le bas, et de la gauche vers la droite, c'est le positionnement static.
J'imagine que si tu m'en parles, c'est qu'il en existe d'autres.Position relative
Tout à fait, on a par exemple la position relative, elle permet de positionner l'élément comme s'il était en static, et de le déplacer par rapport à cette position. Par exemple , je vais positionner la deuxième <div> en relative:
Ben elle s'affiche normalement, elle n'a pas bougéTout à fait, comme je te l'ai dit, la position relative positionne l'élément en static, et ensuite on peut le déplacer, pour le moment je n'ai fait aucun déplacement.
On peut utiliser quatre propriétés pour déplacer un élément relative :
- top : pour le décaler de x unités par rapport au haut de sa position
- bottom: pour le décaler de x unités par rapport au bas de sa position
- left : pour le décaler de x unités par rapport à la gauche de sa position
- right: pour le décaler de x unités par rapport à la droitede sa position
Par exemple :
Ah oui il a bougé !De 20px vers le bas et 20 px vers la droite.
Mais pourtant, tu as mis top et left donc haut et gauche, pourquoi il a bougé en bas et à droite.Parce qu'on le déplace par rapport à sa position, donc si on fait top: 20px ça veux dire qu'on ajoute 20px en hauteur par rapport à la position où il se trouve. Par contre si on utilise bottom et right, ça fait le contraire :
Ok, ok j'ai compris.Position absolute
On peut aussi positionner un élément en absolute, c'est presque comme relative à une nuance près, en absolute l'élément se positionne en static par rapport à la position de l'élément parent et on peut ensuite le déplacer.
Répète un peu ça?Je te montre un exemple :
et la même chose avec absolute :
Mais... c'est bizarre c'est le carré bleu et le orange qui bougent. Pourtant ce n'est que le orange que tu as changé.Effectivement, mais quand on positionne en absolute, on retire l'élément du flux, donc il ne prend plus l'espace qu'il devrait prendre, ce qui fait remonter le troisième carré juste après le deuxième. Et ensuite avec top: 25px on dit au bloc orange de se repérer par rapport au <div> parent, et de se positionner 25p en dessous du haut de celui-ci.
Ok, je pense avoir compris.Position fixed
On peut aussi positionner un élément de façon fixe, il sera alors positionné par rapport à la fenêtre, et il restera toujours à cette position, même si l'utilisateur utilise le scroll. En reprenant le même exemple ça donnerait :
Attention tout de même, cette fois, on ne positionne plus par rapport au parent, mais bien à la fenêtre, donc sans déplacement, l'élément sera tout en haut à gauche de ton navigateur, peu importe les parents.
Position sticky
Et il reste une dernière façon de positionner un élément, avec la position sticky. C'est un mélange entre le fixed et le relative. L'élément garde sa position d'origine dans ses parents, on peut le déplacer avec les même propriétés que d'habitude, mais qui s'appliqueront par rapport à la position de la fenêtre, et il restera à cette position si on scroll.
Houla, tu m'as encore perdu !Ok je comprend mieux avec l'exemple.On a finit pour les positions, passons à la suite ! J'ai terminé cette partie