2 CSS Overlay Techniques to Create Overlapping Page Elements

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:

  • Prompt users for information.
  • Inform users about key site features and other resources available to them.
  • Track user progress.
  • Display important information.
  • Provide site updates and instructions.

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.

  • Static: All HTML elements are positioned static, by default, and even without specifying. Static elements will appear in the natural order indicated in your HTML document, unless a specific position is identified.
  • Relative: The use of the term “relative” may confuse some in the case of CSS positioning. If you try to set an element to position: relative; without specifying further, it will have no effect on that element’s positioning. What you’ve basically told the stylesheet to do is position that element relative to itself. By specifying an attribute, such as position: relative; and top: 50px;, that element’s position will shift 50 pixels beneath where it would naturally appear if it were positioned static.
  • Absolute: Elements that are positioned absolutely can be relocated anywhere you specify, with no regard to the rest of the HTML document. Likewise, the rest of the HTML document and the elements therein will ignore the absolutely positioned element. An absolutely positioned element can also be used to overlap other elements, which is what we’ll be coming back to in a moment.
  • Fixed: A fixed element will remain in the same spot in a user’s web browser, meaning its position will not change if a user decides to scroll through a page.

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.

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.

  • By default, the overlay is centered, but its position is set to absolute, meaning ya web user can scroll past it.
  • A dialog element can be modal, meaning the rest of the document will be rendered non-interactive until the modal is dealt with.
  • There’s an entirely separate stacking layer that exists on top of the CSS stacking contexts, which deals with the window’s “always on top” behavior. This means you don’t need to worry about manually setting the z-index value to be greater than other elements on your web page.

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):

  background-color: #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);

  margin-left: -150px;

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!