Javascript 使用坐标在fancybox中放置元素

我有一个包含2个图像的div，一个是地图，另一个是精确定位图像，我使用javascript捕捉鼠标点击的x，y坐标，精确定位随着点击而轻松移动，下面是代码的样子：

<div id="areapage" onclick="javascript:SetValues();" style="display: none;">
  <img src="mysource" style="width:420;position:relative;" >
  <img id="pindiv" src="images/pin.png" style="position: absolute;top: 0;left: 0;"> 
</div>

<script>
    function SetValues()
{

        document.getElementById('pindiv').style.left = window.event.screenX + 'px';
        document.getElementById('pindiv').style.top = window.event.screenY + 'px';

}
</script>

函数SetValues（）
{
document.getElementById（'pindiv'）.style.left=window.event.screenX+'px'；
document.getElementById（'pindiv'）.style.top=window.event.screenY+'px'；
}

它工作得很好，直到我把它放在一个fancybox中，显然有些东西已经改变了，也许x，y现在指的是打开fancybox的背景中的原始文档？

尝试将#areapage div设置为position:relative；这将使pindiv绝对定位基于该div而不是其父级