keeping image contained within another image. - css

Question

How can I keep a close button contained inside an image even is I change the img size using jquery
#full_image {
width: 200px;
height: 200px;
left: 0px;
top:10px;
position: relative;
opacity: 1;
z-index: 9;
}
#full_image img {
left: 20px;
width: 339px;
height: 211px;
position: relative;
overflow: hidden;
}
#full_image .close{
background: url("http://www.sobral.ce.gov.br/saudedafamilia/close.jpg") no-repeat;
top: 5px;
right: 0px;
cursor: pointer;
height: 29px;
opacity: 1;
position: absolute;
width: 29px;
z-index: 999;
}
<div id="full_image"><img src="http://coe.berkeley.edu/forefront/fall2005/images/woz1.jpg" />
<span> </span>
</div>
JSFIDDLE

Answer 1

Use the following CSS:
#full_image {
position: relative;
}
#full_image span {
position: absolute;
top: 0;
right: 0;
}
This tells the span to be a positioned relatively to #full_image, and stick to top right of it.
Hope this helps :)

Answer 2

You don't specify what "close button contained inside an image" means. I would have tried to put my image and button like this:
HTML:
<div>
<img id="myImage"></img>
<button id="myButton" />
</div>
CSS:
#myImage {
position: relative;
}
#myButton {
position: absolute;
top: ???;
left: ???;
}
jQuery:
You have to calculate where to place your button (what you should give the CSS-attributes for f ex top: and left: )