How do I lay a div tag on top of div tag

Anyone know how to lay a div tag that ha开发者_运维知识库s an Image in it on top of a other div tag that has its one image in it? In the end I want to lay one image on top of a other image.

Thanks

Why not do two div tags, one housing the other, both with background images applied to them. Then you can use the background-position to position them how you'd like.

<div id="one">
  <div id="two">
  </div>
</div>

#one{background:url('image_one.png') no-repeat}
#two{background:url('image_two.png') no-repeat}

EDIT: Make sure you set the height and width of the div's to match your image size.

Put a background image in the bottom <div> tag, and put an <img /> inside the div. Another possibility is to use 2 <img> tags, but apply Position:absolute to both and use z-index to specify the layer order.

You can set it up as a nested div with the internal div set to use relative positioning.

The following is the best tutorial I've ever seen on css positioning:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

solution 1:

<div style="position:relative">
  <div style="position:absolute;top:0;left:0;">
    <img src="foo.png" />
  </div>
  <div style="position:absolute:top:0;left:0;">
    <img src="bar.png" />
  </div>
</div>

solution 2:

<div style="background:url('foo.png') no-repeat scroll transparent">
  <img src="bar.png" />
</div>

not great solutions... Not sure why you would want to do this anyway