El tema es calcular la posición de manera relativa a la zona que te sirve de marco y no respecto de la pantalla.
En el ejemplo que te pongo tenemos tres capas dos de ellas se mueven aleatoriamente pero una de ellas lo hace respecto de la pantalla y la otra respecto de la tercera capa.
position: relative;
position: absolute;
para la capa con position: relative; el punto 0,0 coincide con la esquina superior izquierda de la capa que hace de fondo, mientras que para la otra capa el punto 0,0 és el de la ventana.
Creo que adaptando todo esto puedes solucionar lo que necesitas.
Quim
Código HTML:
Ver original<script language="javascript">
function moure(){
var aleatori;
aleatori = Math.floor (Math.random()*4)+1;
if (aleatori==1) {
moure_dalt('objecte',null);
moure_dalt('objecte2',90);
}
if (aleatori==2) {
moure_dreta('objecte',null);
moure_dreta('objecte2',90);
}
if (aleatori==3) {
moure_arriba('objecte');
moure_arriba('objecte2');
}
if (aleatori==4) {
moure_esquerra('objecte');
moure_esquerra('objecte2');
}
window.setTimeout("moure()",1);
}
function moure_dalt(ID_objecte,vmax) {
var objecte_moure = document.getElementById(ID_objecte);
if (vmax!=null){
if (parseInt(objecte_moure.style.top) + 10>90){
objecte_moure.style.top = 90;
}else{
objecte_moure.style.top = parseInt(objecte_moure.style.top) + 10;
}
}else{
objecte_moure.style.top = parseInt(objecte_moure.style.top) + 10;
}
}
function moure_dreta(ID_objecte,vmax) {
var objecte2_moure = document.getElementById(ID_objecte);
if (vmax!=null){
if (parseInt(objecte2_moure.style.left) + 10>90){
objecte2_moure.style.left = 90;
}else{
objecte2_moure.style.left = parseInt(objecte2_moure.style.left) + 10;
}
}else{
objecte2_moure.style.left = parseInt(objecte2_moure.style.left) + 10;
}
}
function moure_arriba(ID_objecte) {
var objecte3_moure = document.getElementById(ID_objecte);
if (parseInt(objecte3_moure.style.top) - 10<0){
objecte3_moure.style.top = 0;
}else{
objecte3_moure.style.top = parseInt(objecte3_moure.style.top) - 10;
}
}
function moure_esquerra(ID_objecte) {
var objecte4_moure = document.getElementById(ID_objecte);
if (parseInt(objecte4_moure.style.left) - 10<0){
objecte4_moure.style.left = 0;
}else{
objecte4_moure.style.left = parseInt(objecte4_moure.style.left) - 10;
}
}
<div id="cuerpo" style="width:100px; height:100px; background-color: #F5F5DC; border:1px solid #CCCCCC;margin-bottom:10px;z-index:0"> <div id="objecte" style="position: absolute; width:10px; height:10px; left:0px; top:0px; background-color: #cccccc; z-index:1"> </div> <div id="objecte2" style="position: relative; width:10px; height:10px; left:0px; top:0px; background-color: #cccccc; z-index:1"> </div>