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:1开发者_Python百科00px 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.

---

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>

---

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;
}

---

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.

---

Alternate solution using CSS grid:

.grid-container { display: grid; }
/* 'curtain' grid item is placed over the 'backdrop' grid item */
#backdrop, #curtain { grid-area: 1/1; }

/* Cosmetic things for showing the result*/
#backdrop { border: 12px solid red; }
#curtain { border: 10px solid blue; }

<div class="grid-container">
  <div id="backdrop">hello</div>
  <div id="curtain">world</div>
</div>

You can see the grid item with a blue border placed over the grid item with a red border. The idea is both the grid items are placed at the same row = 1, and col = 1 indices and div("curtain") at the last covers previous div(s) if any.

Another Example - Sliding one div over another div:

let overItem = document.getElementById('overItemId');
let index = 1;
let range = 4;
let randomPickScroller = function() {
  let colIndex = ++index % range;
  overItem.style.gridColumnStart = colIndex + 1;
};
randomPickScroller();

setInterval(()=>randomPickScroller(), 500);

.grid-container { display: grid; }
/* 'curtain' grid item is placed over the 'backdrop' grid item */
#backdrop, #curtain, #overItemId { grid-area: 1/1; }

#backdrop, #curtain {
  display: grid;
   grid-template-columns: repeat(4, 1fr);
}

/* Cosmetic things for showing the result*/
#backdrop { border: 1px solid red; }
#overItemId { border: 1px solid blue; }

<div class="grid-container">
  <div id="backdrop">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>  
  </div>
  <div id="curtain">
    <div id="overItemId">----</div>
  </div>
</div>

---

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.

---

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>