求助:随滚动条而滚动层的效果问题,希望有人帮帮忙,感激不尽!

<!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" xml:lang="en" lang="en">
<head>
  <title>aaa</title>
  <script type="text/javascript">
function scrollImg(){
    var posX,posY;
    if (window.innerHeight) {
        posX = window.pageXOffset;
        posY = window.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop) {
        posX = document.documentElement.scrollLeft;
        posY = document.documentElement.scrollTop;
    }
    else if (document.body) {
        posX = document.body.scrollLeft;
        posY = document.body.scrollTop;
    }
    var ad=document.getElementById("ad");
    ad.style.top=(posY+100)+"px";
    ad.style.left=(posX+50)+"px";
    setTimeout("scrollImg()",100);
}
</script>
</head>
<body>
<div id="er" style="margin:0 auto;width:600px;height:6900px;border:1px solid #ccc; background:#000;"></div>
<div id="ad" style="position:absolute;background:#eeeeee;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center"><a href="#" onclick="ad.style.display='none'">关闭</a>此广告位招租<br />www.www.com</div>
<script type="text/javascript">
scrollImg();
</script>
</body>
</html>
这个滚动层,当我把窗口缩小的时候就会遮住中间黑色那块主体,如何让他始终定位在那里,无论怎么缩小位置都不变,这个我搞了很久都搞不到,请求帮助!