W3docs
en
Log in

How to Overlay One Div Over Another

In this snippet, we’ll demonstrate how you can create an overlay effect for two <div> elements. For that purpose, use the CSS position and z-index properties.

Tags

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.

How to Overlay One Div Over Another

<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 <span class="property">position</span> to "relative" and add the margin property.
  • Set both the <span class="property">width</span> and <span class="property">height</span> of the "box" class to "100%". Specify the <span class="property">position</span> 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 <span class="property">z-index</span>, <span class="property">margin</span> and <span class="property">background</span> properties.

How to Overlay One Div Over Another

.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

<div class="demo px-2.5 mt-1 mb-20 not-prose"> XFI4 <div class="box"> XFI5 <div class="box overlay"> </div> </div> </div> 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: relative;
        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 {
        position: relative;
        z-index: 1;
        opacity: 0.5;
        font-size: 30px;
        text-align: center;
        transition: opacity 2s, font-size 2s;
      }
      .box2:hover {
        position: relative;
        z-index: 1;
        opacity: 0.3;
        font-size: 40px;
        text-align: center;
        transition: opacity 2s, font-size 2s;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1">W3Docs</div>
      <div class="box2">Learn programming</div>
    </div>
  </body>
</html>
Try it Yourself »