How do I float one image on top of another?

How do I float one image on top of another?

I've done some searching on this topic, but I can't seem to find an answer
that's exactly what I'm looking for.
I'm trying to set up a banner ad (728 x 90) on my site so it is "laid
over" a div with a background image. Therefore, if someone has an
adblocker, they'll see an image that says "please disable your adblock"
where the ad should be.
My current code is this:
<div style="float: left; background-image:
url(../forum/banners/replacement.png); height: 90px; width: 728px; border:
1px solid black;">
</div>
<!-- BEGIN SMOWTION TAG - 728x90 - DO NOT MODIFY -->
<script type="text/javascript">
<!-- ad code goes here -->
</script>
<!-- END SMOWTION TAG - 728x90 - DO NOT MODIFY -->
However, this makes the ad show up under the div, instead of appearing
'overlaid' on it. How can I make it so that the ad and the div don't clip?