Como superponer imagenes y ubicarlas de acuerdo a divs

Montes28 · #1 (**permalink**) 13/10/2015, 16:11

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<style type="text/css">
body, html { height:100%; 
    margin:0; 
    padding:0;
    width:100%; 
    background-color:silver;
    }
 
#grande{ width:100%;
    height:100%;    
    margin:0;     
    text-align:center;
    }
#uno{ width:33.333333333%;
    display:inline-block;     
    margin:auto;     
    height:50%;    
    overflow:hidden;
    }
#dos{ width:33.333333333%;
    display:inline-block;
    height:50%;    
    overflow:hidden;
    }
#tres{ width:33.333333333%;
    display:inline-block;
    height:50%;    
    overflow:hidden;
    }
#cuatro{ width:33.333333333%;
    display:inline-block;
    height:50%;    
    overflow:hidden;
    }
#cinco{ width:33.333333333%;
    display:inline-block;
    height:50%;    
    overflow:hidden;
    }    
#seis{ width:33.333333333%;
    display:inline-block;
    height:50%;    
    overflow:hidden;
    }    
.img{ width:100%; 
     height:100%;
 
 
    }
.estado{
    position: absolute;
   clear: left;
}

Código HTML:

Ver original</head>
<body>
 
    <div id="grande">
            <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>
            <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>
 
    </div>
 
 
    
</body>
</html>

luis_h_1 · #2 (**permalink**) 13/10/2015, 16:48

Hola,

A la imagen que va a contener a la otra, dale una posición relativa, en cuanto a la imagen hija una posición absoluta con un bottom: 0; y right: 0;

#uno, #dos, #tres, #cuatro, #cinco, #seis {
position: relative;
}
.estado {
position: absolute;
bottom: 0;
right: 0;
}

Espero te funcione, saludos

Montes28 · #3 (**permalink**) 13/10/2015, 18:30

luis_h_1 tenias toda la razon, funciono perfecto.