cssoverlayOverlapping elements on a webpage can help highlight, prompt, and give priority to important content on your page. Being able to centralize a web user’s experience on a single page is just good design practice, making overlays a really valuable feature to have on your site. In this guide, we’ll go over two separate CSS overlay techniques, and how to implement them on your website today.

For more useful CSS overlay techniques, consider taking one of Udemy’s many web design classes, such as this CSS prep course, or this one on the fundamentals of CSS.

What Are CSS Overlays Good For?

Before we begin, let’s consider some of the benefits of implementing a CSS overlay on your website. After all, you shouldn’t invest in something you aren’t 100% sure you need!

With a CSS overlay, you can:

The most important thing to remember is you can accomplish all of this, while keeping the user on the same page. This is key to creating a fluid, uninterrupted user experience; if a user needs to open a separate tab or page to consume small amounts of content, or input small amounts of information, their experience will be clunky and slow. Overlays are intuitive, fast, and light.

CSS Positioning

Before you try to code an overlay in CSS, you need to understand the different positioning values available to you.

For more information on CSS positioning, you could try this advanced CSS training course, or this beginner’s course on designing web pages with CSS.

Technique 1: Absolutely Positioned Elements

This technique requires the use of the z-index property, which determines an element’s stack order. The higher the value of the z-index property, the closer to the “surface” of your web page its element is. Elements with a higher z-index value will appear above elements with a lower z-index value.

The use of absolutely positioned elements seems like a go-to technique, because by their nature, absolutely positioned elements can overlap other elements, and are not affected by the rest of the HTML document. They exist on their own terms!

Here’s what your HTML document should look like:

  <div class="exampleoverlay"></div>
  <div class="examplemodal">This is the content in your pop-up window.</div>
  <div class="maincontent">
      <h1>Your main page header goes here.</h1>
      Your main page content goes here. Blah blah blah, etc.
  </div>

To code the overlay and the modal window, your CSS should look like this, based on this guide about CSS overlays:

body {
    position: relative;
    padding: 30px;
    font-family: Arial;
    background: #cccccc;
    color: #fff;
}
.exampleoverlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10;
}
.examplemodal {
    width: 300px;
    height: 200px;
    line-height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    background-color: #f35798;
    border-radius: 5px;
    text-align: center;
    z-index: 11; /* 1px higher than the overlay layer */
}
.maincontent {
    margin: 10px;
}

As you can see, the modal window has a higher z-index value than the overlay. The overlay also dims the background with the background-color: rgba(0,0,0,0.5); declaration, which is a nice touch if you want the content in your pop-up window to stand out against the main content of your site.

Technique 2: Using the <Dialog> Tag

The dialog element is relatively new to HTML, and only compatible with the Google Chrome and Safari 6 web browsers. It makes it really easy to create a modal window or, as its name suggest, a dialog box. In order to allow this feature in your browser, you must navigate to chrome://flags/, find Experimental Web Platform Features, and enable it.

There are a few cool and convenient characteristics that make this an ideal way to handle overlays in HTML5.

Your dialog element will look something like this in your HTML DOM:

<dialog class="modal">Dialog here.</dialog>

Your CSS will look something like this (based on the example in this modal dialog tutorial):

.modal{
  background-color: #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  height:200px;
  width:300px;
  position:fixed;
  top:50%;
  left:50%;
  margin-left: -150px;
  margin-top:-100px;
}

There are numerous ways to create a CSS overlay for your webpage. To learn more about these, and other techniques to make your website functional, intuitive, and aesthetically pleasing, consider taking a class about web design. Short on time? Try this CSS training course and learn all the basics in an hour!

Top courses in CSS

Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Jonas Schmedtmann
4.8 (29,996)
Bestseller
50 Projects In 50 Days - HTML, CSS & JavaScript
Brad Traversy, Florin Pop
4.7 (3,655)
CSS - The Complete Guide 2021 (incl. Flexbox, Grid & Sass)
Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, Manuel Lorenz
4.7 (10,720)
Bestseller
CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)
Code And Create, George Lomidze, Lasha Nozadze
4.7 (554)
HTML, CSS, JavaScript - Build 6 Creative Projects
Code And Create, George Lomidze, Lasha Nozadze
4.8 (223)
SASS - The Complete SASS Course (CSS Preprocessor)
Code And Create, George Lomidze, Lasha Nozadze
4.5 (382)
Bestseller

More CSS Courses

CSS students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo