Si no me equivoco #header y #visual son hermanos, ambos hijos de #bodywrap (tabula tu código amigo
)
entonces, si quieres que #header se encuentre por encima de #visual:
#header {position:/*la que desees*/; /*controlas la posición con top-left-right-bottom*/
z-index:2;}
#visual {position:/*la que desees*/; /*top-left-right-bottom*/
z-index:1;}
El numero mayor vendrá más adelante.
En el siguiente ejemplo #visual quedará por detrás de #header:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#header {position:absolute; top:0; left:0; z-index:2; background-color:red; width:100px;}
#visual {position:absolute; top:50; left:0; z-index:1; background-color:blue; width:100px;}
</style>
</head>
<body>
<div id="Pagina">
<div id="bodywrap">
<div id="header">
<p>esto se ve por arriba</p>
</div>
<div id="visual">
<p>esto se ve por debajo</p>
</div>
</div>
</div>
</div>
Si copias y pegas el código verás que solo se visualizan 50px de #visual, es decir, su mitad inferior, siendo tapado por #header.
Espero te sirva, saludos!