Позиционирование и наложение изображения на другое изображение

Посмотрите, как крошечный значок Facebook расположен в нижнем правом углу над другим изображением?

Как я могу это сделать, используя комбо HTML/CSS/Rails/Prototype!? Пример был бы замечательным. Возможно, в jsfiddle.net.

Ответ 1

Вот простой пример использования divs вместо изображений: http://jsfiddle.net/sqJtr/

В основном вы помещаете оба изображения в один и тот же контейнер. Дайте контейнеру позицию, которая не является статичной (в моем примере, относительной). Затем дайте оверлейное изображение position: absolute и поместите его, однако вы хотите использовать bottom и right.

Ответ 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>

Ответ 3

Здесь вы идете. Это делается с использованием 2 изображений.

<div class="parent">
    <img src="http://i.ehow.com/images/a06/dv/5g/buy-car-repair-manuals-online-200X200.jpg" />
    <div class="inner"><img src="http://www.airporthybridrentals.com/wp-content/uploads/2009/04/car-rental-sign.gif" /></div>
</div>

.parent{
    width:200px;
    height:200px;
    position:absolute;
    z-index:0;
}

.inner{
    position:absolute;
    z-index:1;
    bottom:0;
    right:0;
}

Проверьте рабочий пример http://jsfiddle.net/WPWzq/

Ответ 4

См. мой ответ на этот вопрос.

Разница с вашей ситуацией в том, что вам не нужен javascript, если вы этого не хотите, вы можете просто добавить divs в html и поместить их абсолютно поверх фотографий.

Я думаю, что я лично добавлю divs, используя javascript, так или иначе, чтобы они не мешали html.