HTML, CSS - image inside image, how to do that?

Issue

I have this piece of HTML code:

<div>
  <div>
    <image src="image-inside-pic-png.png" alt="">
  </div>
  <image src="pic.png" alt="" />
</div>

The pic.png (300x300 px) is the main image. I would like to put the image-inside-pic-png.png (20x20 px) inside of it. When I apply position: absolute; on the small image, it works only momentarily. If I change the size of either, it no longer works.

So my question is, how can I move the small image always in the big image - and this small image will be always 15px from the top and 30px from the right margin of the big image?

Thank you for help

Solution

Without changing your markup this can be achieved e.g. using display:inline-block to the outermost div element (so it won't extend for 100% of the available width) and position relative + absolute for outermost div and thumbnail

see this fiddle: http://jsfiddle.net/cRqhT/3/
border and image size are defined for simplicity

Answered By - Fabrizio Calderan