How to Create an Overlay Using CSS:

There are many techniques for creating overlays. In this snippet, we’re going to show how to create

an overlay using CSS properties.

One of the ways of creating an overlay is by absolutely positioning an HTML element on the page.

We create a div in the markup then it is position absolutely with the position property after it we give

the div high z-index value to make it on top of all other elements on the page with the z-index

property. We give higher z-index to the next div which is opened on the top of our overlay.

1. Create HTML ¶

Create two <div> elements with the classes "overlay" and "modal".

Create another <div> element and write some text in it.

2. Create CSS ¶

Set the position to absolute and set the z-index to 10.

Specify the width, height, top and left properties.

<h2>Creating an Overlay with an Absolutely Positioned Element</h2>

<div class="modal">Lorem Ipsum is simply dummy text </div>

<div>Lorem Ipsum is simply dummy text…</div>

.overlay{

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

3/5/2020 How to Create an Overlay Using CSS

https://www.w3docs.com/snippets/css/how-to-create-an-overlay-using-css.html 2/8

Style the "modal" div.

Set the position to fixed and z-index to 11, 1px higher than the overlay layer.

Specify margin-top and margin-left, border-radius and line-height of the class.

Also, style the body setting the font, color, min-height.

Set the position to "relative" for the overlay to extend when you scroll.

So, we’ve created an overlay. let’s see the outcome!

Example

z-index: 10;

}

.modal {

width: 300px;

height: 200px;

line-height: 200px;

position: fixed;

top: 40%;

left: 50%;

margin-top: -100px;

margin-left: -150px;

background-color: #8ebf42;

border-radius: 40px;

text-align: center;

z-index: 11;

}

body{

position: relative;

padding: 20px;

margin:0;

min-height:100%;

font-family: 'Open Sans', sans-serif;

background: #8ebf42;

color: #eeeeee;

}

3/5/2020 How to Create an Overlay Using CSS

https://www.w3docs.com/snippets/css/how-to-create-an-overlay-using-css.html 3/8

We can also create an overlay using ::before and ::after selectors.

We can have the same styles and considerations used in the previous example by styling the

::before and ::after pseudo-classes on the body.

Example

Try it Yourself »

five centuries, but also the leap into electronic typesetting, remaining

essentially unchanged. It was popularised in the 1960s with the release of

Letraset sheets containing Lorem Ipsum passages, and more recently with

desktop publishing software like Aldus PageMaker including versions of

Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and

typesetting industry. Lorem Ipsum has been the industry's standard dummy

text ever since the 1500s, when an unknown printer took a galley of type

and scrambled it to make a type specimen book. It has survived not only