How can i overlay an 10x10px image on top of another image? [duplicate]

Answer 1

I know I'm not using the exact dimensions you wanted, but here's a working example for you. (You would need the parent ".main_photo" div to be the dimensions of the main photo.)

.main_photo{
    position:relative;
    width:80px;
    height:80px
}
.inlay{
    position:absolute;
    top:5px;
    right:5px
}

<div class="main_photo">
    <img src="https://secure.gravatar.com/avatar/?s=200&d=mm&r=pg" />
    <img class="inlay" src="https://www.rit.edu/news/lib/views/public/images/dateline_images/facebook_icon.gif" />
</div>

Answer 2

First you have to position it - either relative or absolute usually.

Secondly, you have to set a z-index if there are other positioned elements, though you may not necessarily need one.

Using top/left or bottom/right combinations layer the image over the other one.

This is advice without seeing any html/css. It will obviously differ depending on the situation.

#el-on-top { position:absolute; top:0; left:0; z-index:1; }

You may need to set position:relative so the AP'd element's top is relative to something, instead of say, the wrapper or the entire page.