Hola guapetona  
  
Lo que necesitas es que esas capas se queden fijas en la parte superior de la ventana del frame. 
Para los navegadores que soportan bien los estándares css puedes darle a tus capas un tipo de posicionamiento de fixed 
position: fixed 
Eso hará que una capa no se mueva de su posición con respecto a la ventana (no al documento) 
Pero, pa variar, explorer se lo pasa por el forro de ahí. 
Para explorer puedes dedicarte a cambiarle constantemente la posición con js. 
Mira este ejemplillo a ver si te sirve de inspiración  
 Código PHP:
    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#pepe {
    background-color: #990000;
    position: absolute;
}
-->
</style>
<script language="JavaScript">
function mover(){
document.getElementById('pepe').style.top = document.body.scrollTop
}
function posi(){
if(navigator.appName == "Microsoft Internet Explorer"){
    document.getElementById('pepe').style.position = "absolute"
    }
else{
    document.getElementById('pepe').style.position = "fixed"
    }
}
window.onscroll = mover
window.onload = posi
</script>
</head>
 
<body>
<div id="pepe">tralará</div>
<p>hola </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>otro hola</p>
</body>
</html>