Question

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 (300×300 px) is the main image. I would like to put the image-inside-pic-png.png (20×20 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

Answer 1

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