Div overlap not correct - css

Question

I'm having a problem with making one div overlap the rest of the page.
I just need one image to overlap one section. I have kinda got it to work but once you resize the window or look at it on a different resolution the image doesn't appear where it should.
I'm using an position:absolute; and z-index. It is working to some extent. but it won't stay in that position, for example, if you resize your browser window (it moves from where I'd like it to stay).
Here is this website
I need it to overlap the yellow box like this.
Edit: Just a quick follow up: I think your solution has put me a bit of bother. I am unable to place another div directly under it as can be seen here

Answer 1

Move
<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div>
inside
<div id="box"><img src="images/boxheading.png"></div>
just before the image.
Change the CSS to
#medal {
position: relative;
top: -240px;
right: -80px;
z-index: 50;
}
and apply the following to the boxheading.png image
{
position: relative;
top: -280px;
}
EDIT:
From what I feel you are trying to achieve, you should be looking at a 2-column layout. There's too many good-practice resources online to learn how to do it.
To add another box below the first one, you will need to do the following changes to html:
<div id="box-container">
<div id="box">
<div id="medal">
<img src="images/star2012medal.png" width="220" height="277">
</div>
<img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; ">
</div>
<div id="box2">testing</div>
</div>
then add the following css:
#box-container {
float: right;
}
#box {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
}
#box2 {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline-block;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
margin-top: 10px;
}
tested only in Chrome. Remember to test it in other browsers!