Le Positionnement
Donner des ordres de déplacement à tes éléments.
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.
CSScss
.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.
CSScss
.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
CSScss
.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 */
}★
Héros local
4.4 L'interface du jeu : position: fixed
L'unité est fixée à l'écran du joueur. Si tu scrolles, elle ne bouge pas.
CSScss
.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.
CSScss
.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 */
}