javascript - 使用坐标将元素放置在 fancybox 中

Question

我有一个包含 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>

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

Answer 1

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