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

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

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

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     lt div id  parentDiv  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    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   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   lt div id  parentDiv  gt  lt h2 gt  x000D    THIS IS PARENT DIV x000D     lt  h2 gt  x000D     lt div id  backdrop  gt  lt h4 gt  x000D    THIS IS BACKDROP DIV x000D     lt  h4 gt  lt  div gt  x000D     lt div id  curtain  gt  lt h6 gt  x000D    THIS IS CURTAIN DIV x000D     lt  h6 gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

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

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

[html] Displaying one div on top of another

Examples related to html

Examples related to css