То есть никому не известно как оно должно шевелиться, сценарий пиши и все.
<html><head>
<style>
html{width:100%;height:100%;position:fixed;overflow:hidden;}
body{margin:20px;}
#x {
position: absolute; background-color: blue;
width: 100; /* меняй размеры */
height: 100;
top: 0; /* меняй координаты */
left: 0;
z-index: 10; /* меняй ось z */
}
/* во всех остальных квадратах и "сшивай" блеать как угодно */
#xx {
position: absolute; background-color: red;
width: 100;
height: 100;
top: 50;
left:50;
z-index: 2;
}
#xxx {
position: absolute; background-color: yellow;
width: 100;
height: 100;
top: 100;
left: 100;
z-index: 3;
}
</style>
</head>
<body>
<div style="position:relative;">
<div id="x">1</div>
<div id="xx">2</div>
<div id="xxx">3</div>
</div>
<script>
var obj={
x:null,
xx:null,
xxx:null,
};
for(var id in obj)
obj[id]=document.getElementById(id);
var cnt=0,inc=1,step=5,min=1,max=50,left;
t = setInterval(function(){
cnt+=inc;
left=cnt*step;
if(cnt>max || cnt<min) inc=-inc;
obj.x.style.left=left;
obj.xx.style.top=left;
obj.xxx.style.left=left;
obj.xxx.style.top=left;
},100);
</script>
</body>
</html>