지도 영역의 coords 속성과 같은 것을 사용하여 특정 좌표에 div를 배치하십시오.

Question

이미지의 특정 지점 위에 div를 배치 할 수있는 방법이 있습니까? HTML 맵 영역에서 사용될 지점의 좌표가 있다고 가정 해 봅시다. div를 배치 할 때 해당 좌표를 다시 사용하려면 어떻게해야합니까?

Answer 1

난 당신이

을 필요에 따라 다음 자바 스크립트를 통해 absolute 당신이 최고 설정합니다 물론

<div class="relative"> 
<img your map/> 
<div class="pin"><img your pin image></div> 
</div> 

.relative{ 
position:relative 
} 
.pin{ 
position:absolute; 
top:20px; 
left:50px; 
} 

에 내부 사업부를 배치하고 왼쪽 있습니다 사업부에서 이미지를 포장하고, relative 해당 사업부의 위치를 ​​설정할 수도 있겠죠

Answer 2

페이지에 상위 div를 절대 배치하고 상위 이미지에 배경 이미지를 추가 할 수도 있습니다. 그런 다음 상대적 div 위치를 다음과 같이 부모 div에 배치하십시오. https://embed.plnkr.co/gM2VNz/

Answer 3

쉬운 수학을 수행해야합니다. 예를 들어 이미지의 왼쪽 상단은 100,100, 이미지의 오른쪽 하단은 400,400이고 이미지는 300x300입니다. 그리고 당신은 당신이 할 것 130130 조정 핀 싶습니다이 400-100은 상자 130-100 = 3백분의 30 * 100 = 10 그래서 핀 위치 왼쪽 상단은