CSS - Sobreponiendo una imagen sobre otra

Question

No puedo describir esto en palabras, así que te mostraré las imágenes.

Así es como mi diseñador tiene la intención de las imágenes Gravatar para buscar en la barra lateral de nuestro sitio:

how the designer wants it http://i41.tinypic.com/rjnn6v.png

Aquí está la imagen superpuesta que hice (screenshotted desde Photoshop):

my overlay image http://i43.tinypic.com/s1sz2e.png

Así es como se ve ahora ...

not quite ideal http://i42.tinypic.com/21j13s3.png

No del todo ideal, creo que estarás de acuerdo. Este es el código CSS que estoy utilizando:

.gravatarsidebar { 
    float:left; 
    padding:0px; 
    width:70px; 
} 

.gravataroverlay { 
width:68px; 
height:68px; 
background-image: url('http://localhost:8888/images/gravataroverlay.png'); 
} 

Y aquí está el XHTML (y una pizca de PHP para traer la Gravatar base a la dirección de correo electrónico del usuario, que se obtiene de la base de datos):

<div class="gravataroverlay"></div> 

     <div class="gravatarsidebar"> 
      <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68'; 
      echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?> 
     </div> 

Entonces, ¿qué puedo hacer? No puedo usar el posicionamiento relativo, ya que hace que la palabra 'Buscar' en el div a continuación se mueva hacia la derecha.

Gracias por su ayuda!

Jack

Answer 1

¿Ha intentado utilizar z-index para forzar las dos imágenes para superponer? Tal vez algo como esto? Here is a pseudo example.

<div class="gravatar-sidebar"> 
    <img class="overlay-image" src="images/gravataroverlay.png" /> 
    <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68'; 
    echo '<img src="' . $gravatar_link . '" alt="Gravatar" class="gravatar-image"/>'; ?> 
</div> 

/*CSS*/ 
.gravatar-sidebar {float:left;padding:0px;width:70px;position:relative;} 
img.overlay-image{position:absolute;left:0px;top:0px;z-index:10;} 
img.gravatar-image{position:absolute;left:0px;top:0px;z-index:1;} 

Answer 2

no puede utilizar el posicionamiento relativo dónde? En la imagen gravatar?

Tengo que preguntarme por qué tiene su div superpuesta fuera del contenedor de la imagen en sí. Por lo menos, deberían ser hermanos. Haga un contenedor que solo contenga la imagen y la superposición, luego haga que la superposición se ubique en absoluto en 0,0 para estar en la parte superior de la imagen.

<div class="gravatarsidebar"> 
     <?php $gravatar_link = 'http://www.gravatar.com/avatar/' . md5($email) . '?s=68'; 
     echo '<img src="' . $gravatar_link . '" alt="Gravatar" />'; ?> 
     <div class="gravataroverlay" style="position:absolute; top:0; left:0;"></div> 
    </div>