将图像定位和覆盖在另一个图像上

Question

看看微小的Facebook图标如何位于右下角的另一个图像上？

如何使用HTML/CSS/Rails/Prototype组合来做到这一点!？一个例子就是很棒.也许在jsfiddle.net.

Answer 1

这是一个使用div而不是图像的简单示例:http://jsfiddle.net/sqJtr/

基本上,您将两个图像放在同一个容器中.给容器一个非静态的位置(在我的例子中,相对).然后给出叠加图像position: absolute并根据需要使用bottom和定位right.

Answer 2

您可以使用css来解决问题.

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>

基本上,我已经或多或少地做了ZDYN所说的,只是你需要display: inline在容器中包含一个容器,否则容器div跨越整个宽度.