좌표를 사용하여 fancybox 안에 요소 배치

Question

div가 2 개의 이미지를 포함하고 있는데, 하나는지도의 일종이고 다른 하나는 정확한 이미지입니다. 마우스를 x, y 좌표로 캡처하기 위해 자바 스크립트를 사용했으며 pinpoint는 같은 클릭, 여기에 코드는 모습 : 그것은 완벽하게 작동

<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를 기반으로합니다.