Displaying one div on top of another

Question

I have some HTML with two divs    lt div gt     lt div id  backdrop  gt  lt img alt    src   backdrop png    gt  lt  div gt     lt div id  curtain  style  background-image url  curtain png  background-position 100px 200px  height 250px  width 500px   gt  amp nbsp  lt  div gt   lt  div gt    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

User · Answer

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

_x000D_

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

_x000D_

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

_x000D_

User · Answer

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    lt div gt     lt div id  backdrop  style  z-index  1  position  absolute  top  0px  left  0px   gt  lt img alt    src   backdrop png    gt  lt  div gt     lt div id  curtain  style  z-index  2  position  absolute  top  0px  left  0px  background-image url  curtain png  background-position 100px 200px  height 250px  width 500px   gt  amp nbsp  lt  div gt   lt  div gt

User · Answer

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

User · Answer

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    x000D   x000D   dvContainer   x000D    position  relative  x000D    display  inline-block  x000D    width  300px  x000D    height  200px  x000D    background-color   ccc  x000D    x000D   x000D   dvInsideTL   x000D    position  absolute  x000D    left  0  x000D    top  0  x000D    width  150px  x000D    height  100px  x000D    background-color   ff751a  x000D    opacity  0 5  x000D    x000D   lt div class  dvContainer  gt  x000D     lt table style  width 100  height 100    gt  x000D       lt tr gt  x000D         lt td style  width 50  text-align center  gt Top Left lt  td gt  x000D         lt td style  width 50  text-align center  gt Top Right lt  td gt  x000D       lt  tr gt  x000D       lt tr gt  x000D         lt td style  width 50  text-align center  gt Bottom Left lt  td gt  x000D         lt td style  width 50  text-align center  gt Bottom Right lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D     lt div class  dvInsideTL  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I hope this helps  Zag

User · Answer

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

[html] Displaying one div on top of another

Examples related to html

Examples related to css