html - sobre - poner una imagen encima de otra bootstrap

Posicionamiento y superposición de imágenes sobre otra imagen.

Question

¿Ves cómo el pequeño ícono de Facebook está posicionado en la esquina inferior derecha sobre otra imagen?

¿Cómo puedo hacer eso usando un combo de HTML / CSS / Rails / Prototype? Un ejemplo sería genial. Quizás en jsfiddle.net.

Answer 1

Aquí hay un ejemplo simple utilizando divs en lugar de imágenes: http://jsfiddle.net/sqJtr/

Básicamente, pones ambas imágenes en el mismo contenedor. Déle al contenedor una posición que no sea estática (en mi ejemplo, relativa). A continuación, asigne la position: absolute imagen superpuesta position: absolute y colóquela como desee utilizando la bottom y right .

Answer 2

Aqui tienes. Esto se hace utilizando 2 imágenes.

<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;
}

Ver ejemplo de trabajo en http://jsfiddle.net/WPWzq/

Answer 3

Puedes usar css para resolver el problema.

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>

Básicamente, he hecho más o menos lo que dijo ZDYN, solo que necesitas incluir una display: inline en display: inline en el contenedor, de lo contrario, el div contenedor abarca todo el ancho.

Answer 4

Vea mi respuesta a esta pregunta .

La diferencia con su situación es que no necesita ningún javascript si no lo desea, simplemente puede agregar divs al html y colocarlos absolutamente encima de las fotos.

Creo que yo personalmente agregaría los divs usando javascript de todos modos para que no saturen el html.