Des différentes façons de créer un overlay en CSS
Un abonnement sur mon twitter-X et/ou youtube serait fortement apprécié.
Introduction
Vous connaissez sans doute le terme overlay si vous avez déjà mis en place des boîtes de dialogue ou des lightbox sur un site web.
En effet, il s'agit de la couche grisée (ou autre couleur avec une opacité réduite) qui recouvre la fenêtre d'affichage et qui se trouve en dessous de la boîte de dialogue. Cela permet de mettre en évidence le contenu à l'intérieur de la boîte avec un effet de superposition.
Exemple 1 : position absolue
On va utiliser le positionnement absolu pour l'overlay trandis que la fenêtre sera en positionnement fixe.
L'élément body doit impérativement contenir une position relative, tandis que l'élément div contenant l'overlay doit posséder soit une hauteur et une largeur à 100% de manière à recouvrir l'ensemble de la page, soit doit posséder les propriétés de positionnement top, right, bottom et left à zéro ou encore la propriété inset qui regroupe toutes les propriétés précitées.
Exemple 2 : position fixe
Petite variante de l"exemple précédent, en utilisant une position fixe et non pas absolue. L'avantage ici c'est que n'avons pas besoin de déclarer une position relative à l'élément body. L'overlay sera positionné par rapport au viewport (fenêtre navigateur).
Exemple 3 : pseudo-élément
Utilisation d'un pseudo-élément sur un élément conteneur.
Exemple 4 : propriété outline
Le principe ici est d'appliquer un fond opaque directement sur la boîte de dialogue avec la propriété outline.
Exemple 5 : propriété box-shadow
Exemple 6 : avec CSS Grid
Exemple 7 : élément dialog et pseudo-élément ::backdrop
L'élément dialog est apparu dans la spécification HTML 5.2. Celui-ci a été pensé afin de répondre au besoin des développeurs pour créer une boîte de dialogue.
Couplé avec le pseudo-élément ::backdrop, vous obtenez une bôite de dialogue avec un overlay assez facilement.