Need helping positioning "tape" img over another img - css

Question

I'm trying to place an img over another img, because I want the effect of a scrapbook with the images being "taped" into the homepage.
I'd like to keep the tape layer consistent and free myself to change the image underneath without losing the positions.
HTML:
<div id="container">
<div id="content">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />
<div class="text">
<h2>Rain Hands</h2>
<p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
</div>
</div>
</div>
CSS:
.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }
.tape {
margin-left: 10px;
margin-top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}
What I get is:
http://oi50.tinypic.com/28s8x8j.jpg
But I want the tape to be on top of the corners of the image.

Answer 1

Take the tape outside of the div container:
<img class="tape" src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" />
<div id="container">
<div id="content">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<div class="text">
<h2>Rain Hands</h2>
<p>"When someone complains, 'I just felt a raindrop!,' the easiest way to prove his or her statement is to break out the Rain Hands. Hold both hands, palms facing upwards, out towards the sky. If you feel drops, then it is indeed raining. If you don't, then it isn't. Rain hands are fool-proof."<br /><br /><strong>Submitted By: </strong>Shaun</p>
</div>
</div>
</div>
jsFiddle: http://jsfiddle.net/hescano/bb5JC/

Answer 2

Try #content {position: relative;}, and remove the float on the .tape.

Answer 3

The way that I would accomplish this is by making a wrapper div (class="image") to place the photo and the tape graphic inside of. Then wrap the tape image in another absolutley positioned div. Now you can use the top: left: to position the tape graphic so it matches up. In your example, the tape is too tall for your sample image. If you are going to have varying image sizes, it might be smart to make two tape images, one for the top and one for the bottom, and position them using top: and right: and bottom: and left:
<style>
.image{
position:relative;
}
.gesture {
margin-left: 0;
margin-top: 45px;
width: 350px;
float: left; }
.tape {
left: 10px;
top: 45px;
position: absolute;
float: left;
width: 350px;
z-index: 1;}
</style>
<div class="image">
<img class="gesture" src="http://i.imgur.com/rWgpQ6b.jpg" alt="Rain Hands" title="Rain Hands" />
<div class="tape"><img src="http://oi50.tinypic.com/nezz12.jpg" alt="tape" title="tape" /></div>
</div>