Positioning and overlaying image on another image

Question

See how the tiny Facebook icon is positioned in the lower right-hand corner over another image?

How can I do that using a combo of HTML/CSS/Rails/Prototype!? An example would be great. Perhaps in jsfiddle.net.

Answer 1

You can use css to solve the problem.

div {    position: relative;    display: inline;  }  .imtip {    position: absolute;    bottom: 0;    right: 0;  }

<div>    <img src="http://i.stack.imgur.com/Blaly.png" />    <img src="http://www.w3schools.com/favicon.ico" class="imtip" />  </div>

Basically, I've done more or less what ZDYN said, just that you need to include a display: inline in the container otherwise the container div spans the whole width.

Answer 2

Here's a simple example using divs instead of images: http://jsfiddle.net/sqJtr/

Basically, you put both of your images in the same container. Give the container a position that isn't static (in my example, relative). Then give the overlay image position: absolute and position it however you want using bottom and right.