La struttura della pagina è questa:
codice:
<div id="container">
	<div id="header"> </div>
	<div id="menu"> </div>
	<div id="content">
            [img]images/a1.jpg[/img]
            [img]images/a2.jpg[/img]
            [img]images/b1.jpg[/img]
            [img]images/b2.jpg[/img]
            [img]images/c1.jpg[/img]
            [img]images/c2.jpg[/img]
        </div>
	<div id="footer"> </div>
</div>
si tratta di un layout con un'unica colonna, tutti i div sono posizionati uno sotto l'altro, tranne ovviamente il container che li contiene tutti.
Il div container è posizionato orizzontalmente al centro della pagina mediante attributo margin:auto e spaziato dalla parte alta della pagina con padding-top:50 nella definizione del body.

La mia necessità è questa:
ho 3 coppie di immagini delle stesse dimensioni, devo metterle tutte nel div "content" in modo che se ne vedano 3 affiancate, quindi sotto ognuna ce ne deve essere un'altra in secondo piano, quindi ad esempio a1 deve coprire a2, b1 deve coprire b2 e c1 deve coprire c2.
Il problema è che non posso posizionare le immagini in modo assoluto, perché se cambia la risoluzione del monitor le posizioni non sono più giuste.

Come faccio ad affiancarle dentro il div "content" ovunque esso venga visualizzato?

Se avessi solo 3 immagini da affiancare non avrei problemi, il problema sono le immagini che devono occupare la stessa posizione di quelle a cui si devono sovrapporre.