Draw a Link and Graphic over another graphic

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?

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?

Don't use more divs than you need.

<div style="position: relative;">
  <a style="position: absolute; top: 0; left: 0;">
    <img src="..." />
  </a>
  <img src="..." />
</div>

simplify:

<div style="background:url(yourimage.jpg); position:relative;">
<div style="position:absolute; left:0; top:0;">
         <a href="somewhere.html"><img src="inner.jpg"></a>
    </div>
</div>

or:

<div style="background:url(yourimage.jpg); position:relative;">
  <a href="somewhere.html"><img src ="innerimage.jpg" style="position:absolute; left:0; top:0;"/></a>
</div>

or:

    <div style="background:url(yourimage.jpg); position:relative;">
      <a href="somewhere.html" style="position:absolute; left:0; 
top:0;display:block;width:100px;height:100px;"></a>
    </div>