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

Question

我有一个包含 2 个图像的 div，一个是 map ，另一个是精确定位图像，我使用 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 而不是它的父级。