Tema: Como superponer imagenes y ubicarlas de acuerdo a divs
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/10/2015, 16:11
Montes28
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 14 años, 3 meses
Puntos: 6
Como superponer imagenes y ubicarlas de acuerdo a divs
Hola amigos, mi situacion es la siguiente

Tengo 6 divs y cada uno contiene una imagen, como puedo colocar otra imagen encima y que se ubique a la derecha en la parte inferior de cada div

hasta el momento se ve asi https://goo.gl/photos/VqPrQsNP6NhvCyFv5

mi codigo

Código CSS: 
Ver original
  1. <style type="text/css">
  2. body, html { height:100%; 
  3.     margin:0; 
  4.     padding:0;
  5.     width:100%; 
  6.     background-color:silver;
  7.     }
  8.  
  9. #grande{ width:100%;
  10.     height:100%;    
  11.     margin:0;     
  12.     text-align:center;
  13.     }
  14. #uno{ width:33.333333333%;
  15.     display:inline-block;     
  16.     margin:auto;     
  17.     height:50%;    
  18.     overflow:hidden;
  19.     }
  20. #dos{ width:33.333333333%;
  21.     display:inline-block;
  22.     height:50%;    
  23.     overflow:hidden;
  24.     }
  25. #tres{ width:33.333333333%;
  26.     display:inline-block;
  27.     height:50%;    
  28.     overflow:hidden;
  29.     }
  30. #cuatro{ width:33.333333333%;
  31.     display:inline-block;
  32.     height:50%;    
  33.     overflow:hidden;
  34.     }
  35. #cinco{ width:33.333333333%;
  36.     display:inline-block;
  37.     height:50%;    
  38.     overflow:hidden;
  39.     }    
  40. #seis{ width:33.333333333%;
  41.     display:inline-block;
  42.     height:50%;    
  43.     overflow:hidden;
  44.     }    
  45. .img{ width:100%; 
  46.      height:100%;
  47.  
  48.  
  49.     }
  50. .estado{
  51.     position: absolute;
  52.    clear: left;
  53. }



Código HTML: 
Ver original
  1. </head>
  2. <body>
  3.  
  4.     <div id="grande">
  5.             <div id="uno"><img src="http://imagenesderamosdeflores.com/wp-content/uploads/2015/08/ver-fotos-de-paisajes-hermosos.jpg" class="img"><img src="img/success.png" class="estado"  height="64" width="64"></div><div id="dos"><img src="http://imagenesderamosdeflores.com/wp-content/uploads/2015/08/ver-fotos-de-paisajes-para-el-celular.jpg" class="img"><img src="img/success.png" class="estado"  height="64" width="64"></div><div id="tres"><img src="http://imagenesderamosdeflores.com/wp-content/uploads/2015/08/ver-fotos-de-paisajes-hermosos.jpg" class="img"></div>
  6.             <div id="cuatro"><img src="http://imagenesderamosdeflores.com/wp-content/uploads/2015/08/ver-fotos-de-paisajes-para-descargar.jpg" class="img"><img src="img/success.png" class="estado"  height="64" width="64"></div><div id="cinco"><img src="http://imagenesderamosdeflores.com/wp-content/uploads/2015/08/ver-fotos-de-paisajes-para-fondo-de-pantalla.jpg" class="img"></div><div id="seis"><img src="http://imagenesderamosdeflores.com/wp-content/uploads/2015/08/ver-fotos-de-paisajes-para-descargar.jpg" class="img"><img src="img/success.png" class="estado"  height="64" width="64"></div>
  7.  
  8.     </div>
  9.  
  10.  
  11.     
  12. </body>
  13. </html>