DIV 层覆盖问题？

<style type="text/css">
#aa{
width:200px;
height:200px;
top:200px;
left:200px;
background:#CCC;
position:absolute;
z-index:0;
display:block;
}
#aa p{
cursor:pointer;
background:#999;
margin-top:0;
}
#yy{
width:200px;
height:200px;
top:200px;
left:200px;
background:#CCC;
position:absolute;
z-index:0;
display:block;
}
#yy p{
cursor:pointer;
background:#999;
margin-top:0;
}
</style>
<script type="text/javascript">
function $(id){ return document.getElementById(id);}
var M = null,X,Y;
function m(id){
M = $(id);
M.style.zIndex = "1";
X = parseInt(M.offsetLeft) - event.x;
Y = parseInt(M.offsetTop) - event.y;
}
document.onmousemove = function (){
if(M){
if(X + event.x > 800 && Y + event.y > 300 ){
M.style.left = 800;
M.style.top = 300;
}else if(X + event.x > 800){
M.style.left = 800;
M.style.top = Y + event.y;
}else if(Y + event.y > 300){
M.style.left = X + event.x;
M.style.top = 300;
}else{
M.style.left = X + event.x;
M.style.top = Y + event.y;
}
event.returnValue = false;
}
}
document.onmouseup = function (){M = null;}
</script>
</head>

<body background="wallpaper.jpg">
<div id="aa">
<p onmousedown="m('aa')">xx</p>
</div>
<div id="yy">
<p onmousedown="m('yy')">yy</p>
</div>
</body>


这是代码，两个DIV 拖动xx到 yy上面把yy 覆盖 点yy 覆盖 xx 怎么做？