Displaying one div on top of another

I have some HTML with two divs:

<div>
  <div id="backdrop"><img alt="" src='/backdrop.png' /></div>
  <div id="curtain" style="background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

I want the second div #curtain to appear on top of the div #backdrop. The two divs are the same size, however I'm not sure how to position the second div on top of the other.

Solution 1:

Use CSS position: absolute; followed by top: 0px; left 0px; in the style attribute of each DIV. Replace the pixel values with whatever you want.

You can use z-index: x; to set the vertical "order" (which one is "on top"). Replace x with a number, higher numbers are on top of lower numbers.

Here is how your new code would look:

<div>
  <div id="backdrop" style="z-index: 1; position: absolute; top: 0; left: 0;"><img alt="" src='/backdrop.png' /></div>
  <div id="curtain" style="z-index: 2; position: absolute; top: 0; left: 0; background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

Solution 2:

There are many ways to do it, but this is pretty simple and avoids issues with disrupting inline content positioning. You might need to adjust for margins/padding, too.

#backdrop, #curtain {
  height: 100px;
  width: 200px;
}

#curtain {
  position: relative;
  top: -100px;
}

Solution 3:

To properly display one div on top of another, we need to use the property position as follows:

• External div: position: relative
• Internal div: position: absolute

I found a good example here:

.dvContainer {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

.dvInsideTL {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 100px;
  background-color: #ff751a;
  opacity: 0.5;
}

<div class="dvContainer">
  <table style="width:100%;height:100%;">
    <tr>
      <td style="width:50%;text-align:center">Top Left</td>
      <td style="width:50%;text-align:center">Top Right</td>
    </tr>
    <tr>
      <td style="width:50%;text-align:center">Bottom Left</td>
      <td style="width:50%;text-align:center">Bottom Right</td>
    </tr>
  </table>
  <div class="dvInsideTL">
  </div>
</div>

I hope this helps,
Zag.

Solution 4:

Here is the jsFiddle

#backdrop{
    border: 2px solid red;
    width: 400px;
    height: 200px;
    position: absolute;
}

#curtain {
    border: 1px solid blue;
    width: 400px;
    height: 200px;
    position: absolute;
}

Use Z-index to move the one you want on top.

Solution 5:

Have the style for the parent div and the child divs' set as following. It worked for my case, hope it helps you as well..

<div id="parentDiv">
  <div id="backdrop"><img alt="" src='/backdrop.png' /></div>
  <div id="curtain" style="background-image:url(/curtain.png);background-position:100px 200px; height:250px; width:500px;">&nbsp;</div>
</div>

in your JS:

document.getElementById('parentDiv').style.position = 'relative';
document.getElementById('backdrop').style.position = 'absolute';
document.getElementById('curtain').style.position = 'absolute';
document.getElementById('curtain').style.zIndex= '2';//this number has to be greater than the zIndex of 'backdrop' if you are setting any

or in your CSS as in this working example:::

#parentDiv{
  background: yellow;
  height: 500px;
  width: 500px;
  position: relative;
}
#backdrop{
  background: red;
  height: 300px;
  width: 300px;
  position: absolute;
}
#curtain{
  background: green;
  height: 100px;
  width: 100px;
  position: absolute;
  z-index: 2;
  margin: 100px 0px 150px 100px;
}

<div id="parentDiv"><h2>
  THIS IS PARENT DIV
  </h2>
  <div id="backdrop"><h4>
  THIS IS BACKDROP DIV
  </h4></div>
  <div id="curtain"><h6>
  THIS IS CURTAIN DIV
  </h6></div>
</div>