Cómo dejar que una imagen HTML se superponga a otra

<div class="mainRunner"> 
    <img src="../App_Themes/Default/images/a.gif" /> 
    <img src="../App_Themes/Default/images/b.gif" /> 
</div>

Quiero que b.gif se superponga a.gif en lugar de ir en una nueva línea, ¿cómo puedo lograr esto?Cómo dejar que una imagen HTML se superponga a otra

Fuente

2011-03-03 zomb

Superposición ¿cómo tener una maqueta de la imagen ? – Kyle

Puede usar el posicionamiento absoluto (no lo haga) o márgenes negativos con display:inline.

Fuente

2011-03-03 14:45:15 FreeAsInBeer

¿Qué pasa con el posicionamiento absoluto? – jeroen

Absoluto está bien si, por ejemplo, necesita una barra lateral para persistir independientemente de dónde se desplaza, pero he visto algunos sitios atroces que intentan utilizar el posicionamiento absoluto en todo y resulta horrible. mueves una cosa, terminas reestructurando todo tu sitio, mientras que si hubiesen utilizado el posicionamiento relativo, everyt Hing habría caído en su lugar. No es malo per se, pero en mi opinión debería evitarse siempre que sea posible. – FreeAsInBeer

Usted tendría que utilizar el posicionamiento y z-index para conseguir que esto funcione, con el cambio de las imágenes para bloquear elementos de nivel y la adición de una clase:

.mainRunner { 
 
    border: 1px solid #000; 
 
    position: relative; 
 
} 
 

 
.img1 { 
 
    border: 1px solid #f00; 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
.img2 { 
 
    border: 1px solid #0f0; 
 
    position: relative; 
 
    z-index: 1; 
 
    top: -12px; 
 
    left: 12px; 
 
}

<div class="mainRunner"> 
 
    <img class="img1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" /> 
 
    <img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" /> 
 
</div>

Fuente

2011-03-03 14:47:37 Kyle

Asegúrese de que el del El elemento contenedor (envoltura div) tiene un posicionamiento relativo aplicado.

div.mainRunner { position:relative;}

Después de esto, puede hacer una de las siguientes acciones.

Aplique un nombre de clase a cada imagen para que pueda asignarla a un posicionamiento absoluto.

div.mainRunner img.classname { position:absolute; top:__; left:__;}

aplican Por último z-index para la clase de imágenes.

div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:50;}

Y para la segunda imagen;

div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}

Si no tiene ningún control sobre la aplicación de las clases a las imágenes a continuación, hacer esto (en el supuesto de que sólo 2 imágenes estarán en este div;?

div.mainRunner img.classname:first-child { position:absolute; top:__; left:__; z-index:50;} 
div.mainRunner img.classname { position:absolute; top:__; left:__; z-index:51;}

Fuente

2011-03-03 14:53:41 Desi

Cómo dejar que una imagen HTML se superponga a otra

Respuesta

Cuestiones relacionadas