Align image according to container using CSS

Question

I have a banner registration that will have fixed sizes, so I want to add a qrcode that will be generated by the system in this image, along with the user photo. I have this situation :

#carimbo-foto{
   position:absolute;
   z-index:0
}


#banner{
    position: relative;
    left: 0%;
    top:  0%;
}

#carimbo {
    position: absolute;
    left: 50%;
    top: 38%;
    margin-left:-64px;
    margin-top:-73px;  
    z-index:1
}

#qrcode{
    position: absolute;
    left: 51%;
    top: 78%;
    margin-left:-64px;
    margin-top:-73px;  
    z-index:1
}

Html:

<div class="carimbo-foto">

<img src="/Content/imagens/user8-128x128.jpg" class="img-responsive" id="carimbo" alt="" width="90" height="98">
<img src="/Content/imagembanner/banner_novo.png" class="img-responsive" id="banner" alt="" width="560" height="315">
<img src="/Content/qrcode/1.png" class="img-responsive" id="qrcode" alt="" width="80" height="80">

</div>

Current result:

Answer 1

Good if you’re putting the #qrcode and #carimbo in position:absolute, then he won’t respect .carimbo-foto, another postmark-photo is a classe and is declaring itself as an identifier in css.

.carimbo-foto{
position:relative;
height: 315px;
width:560px;
}
#carimbo{
position:absolute;
right: 11px;
top: -15px;
}
#qrcode{
position:absolute;
right: 11px;
bottom: -15px;
}	

<div class="carimbo-foto">

<img src="http://img.vmessages.com/en/funny/35.jpg" class="img-responsive" id="carimbo" alt="" width="90" height="98">
<img src="https://thumbs.dreamstime.com/t/bandeira-horizontal-de-cloudscape-43923748.jpg" class="img-responsive" id="banner" alt="" width="560" height="315">
<img src="http://cdnqrcgde.s3-eu-west-1.amazonaws.com/wp-content/uploads/2013/11/jpeg.jpg" class="img-responsive" id="qrcode" alt="" width="80" height="80">

</div>

In my view an easier way was to set the banner image as the background of the photo stamp div, but if the image is not static complicates a little...

See if it helps this example...