Displaying one div on top of another

Question

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.

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

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