Overlap 2 Images and Make Their Positions Relative?

Question

I need to essentially make a hotspot on an image that is another image.
I know how to make hotspots. I know how to overlap images. But I need the overlapping image's position to be relative to the image beneath it.
How can I do this?
I have tried searching for Overlapping Images (answer: CSS)
I have also tried searching for Mapping Images to Images (no luck, just brings up info on mapping images, period)
I'm not sure what to search for to get this answer. That is why I am posting.
I am using Dreamweaver CS3. I am a total n00b but if you point me in the right direction I can figure out the rest with research.
Thank you in advance for your time.
PS- Please don't say, "Why not just merge the 2 images with an Imaging Program?" I need to do this with hundreds of images, AND I need the images available separately on my site. This would create hundreds of additional images that I need to upload.

Answer 1

Ignore this. I lost over half my post somehow. I'll try again. -.-
<!Session data><input id="jsProxy" type="hidden"/></p><div id="refHTML"> </div><p></p><p><input id="gwProxy" type="hidden"/><!--Session data==></!--Session><input id="jsProxy" onclick="jsCall();" type="hidden"/></p>
<div id="refHTML"></div>
<p>This gives me a hotspot on an image. The hotspot's location is relative to the image behind it due to the image map.</p>
<p> </p>
<p>And here:</p>
<p> </p>
<div ispre=true?? __default_attr="plain" __jive_macro_name="code">
<p>&lt;style type="text/css"&gt;<br/>&lt;!==<br/>.overlap {<br/> position: absolute;<br/> top: 100px;<br/> left: 50px;<br/>}<br/>==&gt;<br/>&lt;/style&gt;<br/>&lt;/head&gt;<br/><br/>&lt;body&gt;<br/>&lt ;div align="center"&gt;&lt;img src="background.png" width="770" height="600" /&gt;&lt;img src="image.png" width="100" height="100" class="overlap" /&gt;<br/>&lt;/div&gt;</p>
</div>
<p> </p>
<p>This allows me to overlap images.</p>
<p>I need a little of both of these concepts.</p>
<p> </p>
<p>I need image.png's position to be relative to background.png's position. That way image.png overlaps background.png in exactly the same place regardless of my user's resolution or browser window size. My page is centered. If my page was left-aligned this would not be an issue.</p>
<p> </p>
<p>I have been digging through CSS tutorials, and I'm certain the answer is there, but I am not getting it.</p>
</body>
></p><p><input id="gwProxy" type="hidden"/><!Session data-->