How to make Div overlay the entire page (not just viewport) with CSS?

Spread the love

Sometimes, we want to make Div overlay the entire page (not just viewport) with CSS.

In this article, we’ll look at how to make Div overlay the entire page (not just viewport) with CSS.

To make Div overlay the entire page (not just viewport) with CSS, we make the div stay at the top left corner.

For instance, we write

<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>

to add the div in the body element.

Then we write

div.fadeMe {
  opacity: 0.5;
  background: #000;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: fixed;
}

to make the div fixed to the top left corner with top: 0;, left: 0; and position: fixed;.

Then we set the width and height to 100% to make it fill the whole screen.

To make Div overlay the entire page (not just viewport) with CSS, we make the div stay at the top left corner.