使用坐标将元素放在fancybox中

Question

我有一个div包含2个图像，一个是一个地图，另一个是精确图像，我使用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>

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

Answer 1

尝试将#areapage div设置为position：relative;这将使pindiv的绝对定位基于该div而不是它的父级。