Draw a Link and Graphic over another graphic

css, html

Solution

Something like this would work (recommend moving the inline CSS to a stylesheet of course):

<div style="position:relative">
    <div>
         <img src="backgroundimg.png">
    </div>
    <div style="position:absolute; left:0; top:0;">
         <a href="foo.html"><img src="smallgraphic.png"></a>
    </div>
</div>

The `position:absolute` will place that div relative to a container with `position` set, in this case at left 0 top 0. So that means it will end up in the top left of the same element that the 'backgroundimg' is placed in.

Does that make sense?

Problem

I have a picture on a page, and I simply want to draw a link with a small graphic in the upper left corner of the picture. Is there any way to do this? to overlap it on the picture appropriately?

Original source