Le positionnement CSS permet de placer un élément dans un document HTML. Pour cela, il existe la propriété position et ses propriétés associées. Celles-ci vont nous permettre de définir l'emplacement final de l'élément.
Revenons rapidement sur les valeurs de la propriété position qui définissent le type de positionnement :
static : comportement normal attendu. Les propriétés de positionnement ne s'appliquent pas.
relative : l'élément ne sort pas du flux du document. Il se décale par rapport à lui-même.
absolute : l'élément sort du flux et sera positionné selon son élément parent.
fixed : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (viewport).
sticky : La position de l'élément est calculée en fonction du flux normal du document. L'élément est décalé par rapport à son ancêtre de défilement le plus proche et par rapport à son bloc englobant.
Voilà pour le contexte. Nous allons pouvoir aborder le positionnement qui nous intéresse ici : le positionnement absolu.
Le positionnement absolu
Ah ! C'est le positionnement absolu. Tuons-le ! Tuons-le !
Vous avez sans doute usé, voire abusé de ce mode de positionnement, parfois à raison, souvent par dépit, tatonnant avec l'ordre d’empilement. Se servir du positionnement absolu n'est pas une mauvaise pratique, loin de là.
Nous savons que le positionnement absolu retire l'élément du flux normal. Il est alors possible de placer un élément par dessus un autre (une superposition).
Imaginons que nous souhaitons afficher une image sur laquelle nous allons insérer une première couche (overlay) sur l'image, puis une seconde couche où nous allons placer du texte.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Avec Le CSS Grid layout, une nouvelle ère est née. Ce modèle de disposition en grille propose un nouveau moyen de positionner des éléments, plus simplement et plus logiquement.
Reprenons l'exemple de l'image avec les deux couches superposées :
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Avant l'arrivée des grilles CSS, le seul moyen de créer un slideshow en CSS était d'utiliser le positionnement absolu. On superposait les images les unes sur les autres et on mettait une animation CSS pour faire apparaître puis disparaître les photos.
Ci-dessous, un exemple de diaporama avec Grid layout :
Vous allez voir, c'est très simple à mettre en place.
.cadre-slideshow-auto{
max-height: 800px;
max-width: 50rem;
margin: 2rem auto;
}
.slideshow-auto{
display: grid;/*on déclare le Grid layout*/
}
.slideshow-auto li {
border: 10px solid white;
box-shadow:0 0 10px rgba(0, 0, 0, 0.2);
/*on empile tous les éléments sur la même colonne et la même rangée et rien de plus*/
grid-column: 1;
grid-row: 1;
opacity: 0;
animation: slide 9s linear infinite
}
.slideshow-auto li:nth-child(2) {
animation-delay: 3s
}
.slideshow-auto li:nth-child(3) {
animation-delay: 6s
}
@keyframes slide{
0%{
opacity: 0
}
12%{
opacity: 1;
}
25%{
opacity: 1;
}
37% {
opacity: 0;
}
100% {
opacity:0;
}
}
Là où les grilles CSS vont nous être particulièrement utiles c'est pour placer des éléments de contrôle. Au lieu de déclarer un positionnement absolu pour chaque élément de contrôle, nous allons simplement les placer grâce au valeurs de placement du Grid layout. Et cela va nous simplifier grandement la vie. De plus, nous allons gagner en visibilité au niveau du code.
Vous pouvez retrouver le code de cette démonstration :
Il existe de nombreux autres cas où vous pourrez vous servir de cette technique, comme par exemple pour créer une carte de profil. Les grilles CSS bénéficiant d'un très bon support navigateurs, il est temps de les utiliser dans leur pleine mesure.
Bien entendu, vous l'aurez compris, sous le titre faussement provocateur de l'article, vous pouvez toujours utiliser le positionnement absolu. D'ailleurs, dans certains cas, vous vous rendrez compte qu'il est préférable de mettre en place ce type de positionnement.
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.
