Sovrapposizione immagini

[avgvsta]

Ciao a tutti, nella mia pagina web vorrei inserire un'immagine grande per metà pagina e sopra questa immagine, alcune immagini più piccole.
Purtroppo dopo tante prove le immagini più piccole non mi appaiono dove voglio io sopra l'immagine più grande. Su internet ho trovato qualcosa ma non fa al mio caso.
Secondo voi esperti del settore, è possibile fare ciò? mi date una dritta o un link?
grazie in anticipo

<style type="text/css">
#container {
width:800px;
height:327px;
vertical-align:top;
float:right;
margin:0 auto;
background-image:url(img1.jpg);
}
</style>
<div id="container">
<img style="width: 50px; height: 48px;padding-left:550px; padding-top:30px; alt=""; src="img2.png">
<img style="width: 50px; height: 48px; padding-left:270px; padding-top:100px; alt="" src="img2.png">
<img style="width: 50px; height: 48px; padding-left:350px; padding-top:150px; alt="" src="img3.png">
ecc.....
</div>

[ac_socmel]

devi imparare a usare position

<style type="text/css">
#container {
    width:800px;
    height:327px;
    margin:0 auto;
    background-image:url(img1.jpg);
    position: relative;
}
.bollo {
    position: absolute;
    width: 50px;
    height: 48px;
}
.destro {
    left:550px;
    top:30px;
}
.sinistro {
    left:270px;
    top:100px;
}
.centrale {
    left:350px;
    top:150px;
}</style>

e semplificare l'html

<div id="container">
   <img class="bollo destro" src="img2.png" alt="">
   <img class="bollo sinistro" src="img2.png" alt="">
   <img class="bollo centrale" src="img3.png" alt="">
</div>