Le Positionnement
Donner des ordres de déplacement à tes éléments.
Imagine : tu joues à un jeu de stratégie. Tu as plusieurs unités sur le champ de bataille (tes éléments HTML). Par défaut, elles se suivent en file indienne, sans se chevaucher. C'est le "flux normal".
La propriété position, c'est comme le panneau d'ordres. Tu peux dire à une unité de "rester en formation", de "se décaler", ou de "rester collée à l'écran".
4.1 Le soldat discipliné : position: static
C'est la position par défaut. L'unité reste sagement dans le flux. Elle ignore les ordres top, left, etc.
.soldat-de-base {
position: static; /* Pas besoin de l'écrire, c'est la valeur par défaut */
}4.2 Le pas de côté : position: relative
Ici, l'unité se décale par rapport à sa position d'origine. Sa place reste réservée, mais elle peut se superposer aux autres.
.badge-nouveau {
position: relative;
top: -10px; /* Se décale de 10px vers le haut */
left: -5px; /* Se décale de 5px vers la gauche */
}4.3 L'unité volante : position: absolute
Point crucial ! Une unité en absolute est "en dehors du flux". Elle se positionne par rapport à son parent le plus proche qui n'est PAS static (souvent un parent relative).
.carte-heros {
position: relative; /* Le "général" qui sert de référence */
width: 200px;
}
.icone-favori {
position: absolute; /* L'unité volante */
top: 10px; /* Se place à 10px du haut du général */
right: 10px; /* et à 10px de sa droite */
}4.4 L'interface du jeu : position: fixed
L'unité est fixée à l'écran du joueur. Si tu scrolles, elle ne bouge pas.
.barre-de-sorts {
position: fixed;
bottom: 0; /* Collée en bas de l'écran */
left: 0; /* et à gauche */
width: 100%; /* Elle prend toute la largeur */
background-color: rgba(0, 0, 0, 0.8);
}4.5 Le sous-titre intelligent : position: sticky
Un hybride malin. Il est static jusqu'à ce que le scroll l'atteigne, puis devient fixed jusqu'à la fin de son conteneur.
.titre-de-zone {
position: sticky;
top: 0; /* Se collera à 0px du haut de l'écran quand on scrolle */
background-color: white; /* Important pour ne pas voir le texte défiler derrière */
}