Buongiorno a tutti,
non riesco a venire a capo di un problema con il posizionamento di un div.
Sto utilizzando uno script javascript per poter inserire delle immagini di sfondo a rotazione con un effetto transizione e vorrei che sopra venisse visualizzato un div in trasparenza con un testo.
Praticamente all'interno di una cella ho inserito questo codice:

<td height="650" valign="top">
<div class="rslides" id="slider1">
[img]immagini/nature_1.jpg[/img]
[img]immagini/nature_2.jpg[/img]
[img]immagini/nature_3.jpg[/img]

<div class="boxtesto" style="padding:10px" align="justify">
<span class="titolo">Prova

</span><span class="testo">
Rinomato per la sua cucina a base di carne fresca selezionata, proveniente da tutto il mondo, cucinata alla griglia.
Oltre al vasto menù con ampia scelta tra antipasti, primi e secondi e carta dei vini eccellente, si ricorda la tipica “Schiacciata”, particolare pizza preparata con mix di farine selezionate e lunga lievitazione, alimento sano, completo e genuino, proposta dalla semplice Margherita a quella più elaborata e gustosa.</span>
</div>
</div>

</td>

e nel css collegato:

.rslides {
position: relative;
overflow: hidden;
width: 100%;
padding: 0;
top:15px;
left:210px;
z-index:1;
}

div.boxtesto {
position: absolute;
top: 220px;
left: 500px;
width: 300px;
height:400px;
background: #666;
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
z-index:2;
}
span.titolo {
color: #FFFFFF;
font: bold 18px Verdana;
letter-spacing: 0px;
}
span.testo {
color: #FFFFFF;
font: 14px Verdana;
letter-spacing: 0px;
}

Sono inoltre collegati dei file .js

Il fatto è che l'immagine di sfondo va bene, mentre il div si "sposta" in base alla dimensione della finestra del browser.

Qualcuno mi potrebbe dire dove sto sbagliando per favore?

Grazie anticipatamente.