[Div con fade] sovrapposto ad altri div

[cicico]

Salve,

ho un problema con questo codice, in pratica è un effetto fade sul div "dog" che dovrebbe contenere la pagina delle persone online, ma siccome sono più div ho un problema di sovrapposizione dei div, quindi ho messo che il div di base ha display "none" a questo punto quando compare e scompare io faccio in modo che esso compare e scompare tramite javascript, ma proprio quì chiedo un aiuto siccome mettendolo come ho fatto io mi taglia l'effetto fade non mostrando la dissolvenza la prima volta che si chiama.

Qualcuno sa come posso risolvere in maniera facile?

<style type="text/css">
Body{background:url(bg.jpg) fixed; margin-top:10px;}
#dog {
width: 550px;height: 500px;
background:url(BG.jpg);
position:absolute; left: 50%; top: 20px;margin-left: -250px;
filter: alpha(opacity=0);-moz-opacity: 0;opacity: 0;
border: 2px solid #fff;
display:none;
}
</style>

<script language="javascript">
function opacity(id, opacStart, opacEnd, millisec) {

var speed = Math.round(millisec / 100);
var timer = 0;

if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
if (document.getElementById(id).style.opacity <= 1) document.getElementById(id).style.display = 'none' ;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}


function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function currentOpac(id, opacEnd, millisec, mostra) {
if (mostra == "block") document.getElementById(id).style.display = mostra ;

var currentOpac = 100;

if(document.getElementById(id).style.opacity < 100) {
currentOpac = document.getElementById(id).style.opacity * 100;
if (mostra == "block" && document.getElementById(id).style.opacity > 0) document.getElementById(id).style.display = mostra ;
}


opacity(id, currentOpac, opacEnd, millisec)
}
function vedi ( eid, idMenu, dove ) {

currentOpac('dog', 99.9, 200, 'block')
}

</script>
<div id="main">
<div id="banner"></div>
<div id="centro">
</div>
<div id="descrizione"></div>
<div id="footer"></div>
<div id="dog"></div>

</div>
<input alt="Personaggi Online" onclick=" vedi('dog', 'online', 'online');" type="image" src="Online.png" value="Online" />

[Ht28]

Devi usare z-index http://www.w3schools.com/Css/pr_pos_z-index.asp

[cicico]

grazie del suggerimento