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>