capa escondida mueve todo

[lulyhot83]

hola a todos queria preguntarles como hacer para que no se mueva todo lo que esta debajo de un div que esta escondido (DISPLAY EN NONE) y al pasar el mouse por arriba de un enlace aparece(DISPLAY EN BLOCK) este DIV seria un DIV de login donde hay un formulario y adentro una tabla cuyas filas son :la primera con dos campos
a) USUARIO
b)INPUT TEXT

y la segunda fila con los campos:
a) CONTRASEÑA
b) INPUT PASSWORD

aca el codigo:


#flecha{
position:relative;
top:8px;
}
#enlacelogin:hover{
text-decoration:underline;
}

#escondido{
width:200px;
height:100px;
background:steelblue;
color:#fff;
display:none;
}

#lineausuario{
position:relative;
left:-80px;
}




</style>
<script type="text/javascript">
var color = 0;
var suma = 10;
function aparecer(){
var obj = document.getElementById('escondido');
obj.style.display = "block";
color += suma;
if (!(color>=110)){
obj.style.filter = 'alpha(opacity='+color+')';
obj.style.opacity = color /100;
obj.style.MozOpacity = color /100;
obj.style.KHTMLOpacity = color /100;
window.setTimeout ("aparecer();", 100);
}
}
function desvanecer() {
var obj2 = document.getElementById('escondido');
color -= suma;
if (!(color <=-10)){
obj2.style.filter = 'alpha(opacity='+color+')';
obj2.style.opacity = color /100;
obj2.style.MozOpacity = color /100;
obj2.style.KHTMLOpacity = color /100;
window.setTimeout ("desvanecer();", 100);
}
}

function llama(){
if (color<=0){
aparecer();
}
else {
desvanecer();
}
}
</script>

(aqui la llamada)

<span id="lineausuario"><img src="iconousuario.gif"/>&nbsp&nbsp <a id="enlacelogin" href="" target="_blank" onmouseover="llama()">Iniciar Sesion<img id="flecha" src="flechaAbajo.gif" /> </a></span>
<div id="escondido">
<form method="post" name="flogin" action="">
<table>
<tr>
<td>Usuario</td>&nbsp;<td><input type="text" /></td>
</tr>

</table>


</form>
</div>


(aqui hay otro div con posicion relativa, que se baja tb cuando aparece el div escondido)


espero sus respuestas como siempre