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

Dernière mise à jour : mai 2022

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 sur la boîte de dialogue. De ce fait, celle-ci se trouve au centre de la fenêtre d'affichage, tandis que l'overlay recouvre l'ensemble de la page.



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




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

html, 
body {


min-height: 100vh;
display: flex;
flex-flow: column;
align-items: center
	
}

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);
z-index: 1
	
}


.modal {

min-width: 50vw;
max-width:80vw;
min-height: 50vh;
max-height: 80vh;
position: fixed;
top: 50%; 
left: 50%;
transform:translate(-50%,-50%);
background: white;
display:flex;
flex-flow: column;
align-items: center;
justify-content: center;
border-radius: 5px;
z-index: 2;
}



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>
<div class="modal">	
</div>



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

html, 
body {

min-height: 100vh;
display: flex;
flex-flow: column;
align-items: center

	
}

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);
z-index: 1;

}

.modal {

border: 2px solid;
min-width: 50vw;
max-width:80vw;
min-height: 50vh;
max-height: 80vh;
position: fixed;
top: 50%; 
left: 50%;
transform: translate(-50%,-50%);
background: white;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
border-radius: 5px;
z-index: 2;

}



Exemple 3 : pseudo-élément :before

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



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



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

html, 
body {

min-height: 100vh;
display: flex;
flex-flow: column;
align-items: center

	
}

body {

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

}


body:after {

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

.modal {

border: 2px solid;
min-width: 50vw;
max-width: 80vw;
min-height: 50vh;
max-height: 80vh;
position: fixed;
top: 50%; 
left: 50%;
transform: translate(-50%,-50%);
background: white;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
border-radius: 5px;
z-index: 2;

}



Exemple 4 : propriété outline



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



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

html, 
body {

min-height: 100vh;
display: flex;
flex-flow: column;
align-items: center

	
}
	
	
body{    

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

border: 2px solid;
min-width: 50vw;
max-width: 80vw;
min-height: 50vh;
max-height: 80vh;
position: fixed;
top: 50%; 
left: 50%;
transform: translate(-50%,-50%);
background: white;
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
border-radius: 5px;
z-index: 1; 
outline: 9999px solid rgba(0,0,0,0.5);

}



Exemple 5 : propriété box-shadow



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



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

html, 
body {

min-height: 100vh;
display: flex;
flex-flow: column;
align-items: center

	
}
	
	
body{    

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

.modal {

border: 2px solid;
min-width: 50vw;
max-width: 80vw;
min-height: 50vh;
max-height: 80vh;
position: fixed;
top: 50%; 
left: 50%;
transform: translate(-50%,-50%);
background: white;
display:flex;
flex-flow: column;
align-items: center;
justify-content: center;
border-radius: 5px;
z-index: 2; 
box-shadow: 0 0 0 100vw rgba(0,0,0,0.5);

}




Exemple 6 : avec CSS Grid



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

<main>
</main>



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

html, 
body {

min-height: 100vh;
	
	}


body {
margin: 0;	
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 1fr;
font-family: 'Lato', sans-serif;
background: white;
color: #555;

}



.modal {
place-self:center;
border:1px solid;
min-width: 50vw;
max-width:80vw;
min-height: 50vh;
max-height: 80vh;
background: white;
display:grid;
grid-template-areas: "modal";
border-radius: 5px;
z-index: 1;
padding:10px;
}
	
.modal>*{grid-area:modal}

.modal h2{place-self:center;}
.modal div{align-self:end;justify-self:center}
	
	
.overlay {
	
grid-column: 1/4;
grid-row: 1/4;
background-color: hsla(0, 0%, 0%, 0.5);
z-index:-1;

}	
	
	
main{

align-self:center;
grid-column: 1/4;
grid-row: 2
	
	}





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.


Exemple 8 : élément details

Cette méthode n'est pas spécialement recommandée. En effet, l'élément details est avant tout fait pour créer un toggle.



<details open>
<summary></summary>
</details>




html, body {
margin: 0;
min-height: 100vh;
display:flex;
flex-flow: column;
align-items: center

	
}


body{    

font-family: 'Lato', sans-serif;
background: white;
color: #555
	
	}
	
details[open]  {

width: 50vw;
max-width: 80vw;
height: 50vh;
max-height: 80vh;
position: fixed;
top: 50%; 
left: 50%;
transform:translate(-50%,-50%);
background: white;
border-radius: 5px;
z-index: 2;
box-shadow: 0 0 0 100vw rgba(0,0,0,0.5)
	
}

summary{

cursor: pointer;
display: flex;
	
	}

	
details[open] summary:before{
	
content:'fermer'
	
}	


Vous rencontrez un problème avec ce tutoriel ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis du tutoriel ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.

haut page