Aller au contenu principal
Partagez ce tutoriel :

Des différentes façons de créer un overlay en CSS

Dernière mise à jour : juin 2023

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.



<body>

<div class="overlay"></div>
	
</div>





*{
  box-sizing: border-box;
}

html, 
body {

min-height: 100vh;

	
}

body {

margin: 0;
position: relative; 
background: white;
color: #555;
	
}


.overlay {
	
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: hsla(0, 0%, 0%, 0.5);
	
}



Exemple 2 : position fixe

Petite variante de l"exemple précédent, en utilisant une position fixe et non pas absolue.



<body>
<div class="overlay"></div>





* {

  box-sizing: border-box;
  
}


html, 
body {

min-height: 100vh;


	
}

body {

margin: 0;
background: white;
color: #555;

}


.overlay {

position: fixed;
top: 0; 
left: 0;
bottom:0;
right:0;
background-color: hsla(0, 0%, 0%, 0.5);

}





Exemple 3 : pseudo-élément

Utilisation d'un pseudo-élément sur un élément conteneur.



<body>

</body>




*,
*::before,
*::after {
  box-sizing: border-box;
}

html, 
body {

min-height: 100vh;

	
}


body {

margin: 0;
background: white;
color: #555;
position: relative; 

}


body::after {

content: "";
position: fixed; 
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: hsla(0, 0%, 0%, 0.5);
	
}





Exemple 4 : propriété outline



<body>
<div class="overlay-modal">	
</div>



* {

  box-sizing: border-box;
}


html, 
body {

min-height: 100vh;
	
}

	
body{  
	
margin: 0;
background: white;
color: #555
	
	}
	
	
.overlay-modal {

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 90%;
max-width: 500px;
min-height: 200px;
max-height: 50vh;
overflow-y: auto;
background: white;
/*border-radius: 5px; en ajoutant un border-radius, on observe un léger effet de flou autour de la bordure sur Firefox*/
outline: 9999px solid rgba(0,0,0,0.5);

}



Exemple 5 : propriété box-shadow



<body>
<div class="overlay-modal">	
</div>




* {

  box-sizing: border-box;
}


html, 
body {

min-height: 100vh;
	
}

	
body{  
	
margin: 0;
background: white;
color: #555
	
	}
	
	
.overlay-modal {

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 90%;
max-width: 500px;
min-height: 200px;
max-height: 50vh;
overflow-y: auto;
background: white;
border-radius: 5px;
box-shadow: 0 0 0 100vw rgba(0,0,0,0.5);/*l'ombre portée recouvre l'ensemble de la page*/


}




Exemple 6 : avec CSS Grid



<body>
<div class="overlay">
</div>




* {
  box-sizing: border-box;
}

html, 
body {

min-height: 100vh;
	
	}


body {
margin: 0;	
display: grid;
background: white;
color: #555;

}

	
.overlay {
	
z-index:1;
grid-area: 1/1/-1/-1;
background-color: hsla(0, 0%, 0%, 0.5);

}	
	



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.