How to Overlay One Div Over Another

Creating an overlay effect for two <div> elements can be easily done with CSS. This can be done with the combination of the CSS position and z-index properties. The z-index of an element defines its order inside a stacking context. In our examples, we’ll use the “absolute” and “relative” values of the position property and add the z-index property to specify the stacking order for the positioned elements.

So, let’s start!

Create HTML

Use a <div> element with the class named “container”.
Add two other <div> elements within the first one. Add classes to them as well.

<div class="container">
  <div class="box"></div>
  <div class="box overlay"></div>
</div>

Add CSS

Specify the width and height of the "container" class. Set the position to "relative" and add the margin property.
Set both the width and height of the "box" class to "100%". Specify the position with the "absolute" value. Add the top and left properties. Also, specify the background and opacity of the "box" class.
Style the "overlay" class by using the z-index, margin and background properties.

.container {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 30px;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.7;
  background: #0057e3;
}

.overlay {
  z-index: 9;
  margin: 30px;
  background: #009938;
}

Now, we can bring together the parts of our code.

Example of overlaying one <div> over another:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        width: 150px;
        height: 150px;
        position: relative;
        margin: 30px;
      }
      .box {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.7;
        background: #0057e3;
      }
      .overlay {
        z-index: 9;
        margin: 30px;
        background: #009938;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="box overlay"></div>
    </div>
  </body>
</html>

Try it Yourself »

Result

Let’s see another example where we use a bit more CSS. Here, we add some hovering effects using the CSS :hover pseudo-class.

Example of overlaying one <div> over another with hovering effects:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        position: absolute;
        height: 250px;
        width: 400px;
        background-color: #7d807e;
      }
      .box1 {
        color: #fff;
        padding-top: 60px;
        padding-left: 50px;
        font-size: 50px;
        font-weight: bold;
      }
      .box2 {
        padding-left: 50px;
      }
      .box1:hover {
        z-index: -1;
        opacity: 0.5;
        font-size: 30px;
        text-align: center;
        transform-style: all;
        transition-duration: 2s;
      }
      .box2:hover {
        z-index: -1;
        opacity: 0.3;
        font-size: 40px;
        text-align: center;
        transform-style: all;
        transition-duration: 2s;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1">W3Docs</div>
      <div class="box2">Learn programming</div>
    </div>
  </body>
</html>