Расположение и наложение изображения на другое изображение

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 охватывает всю ширину.

Answer 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/

Answer 4

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

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

Я думаю, что я все равно лично добавлю div, используя javascript, чтобы они не загромождали html.