使用地图区域的 coords 属性将 div 放置在特定坐标处

Question

有什么方法可以将 div 放置在图像中的特定位置之上？假设我有将在 HTML 地图区域中使用的那个点的坐标，我需要做什么才能重新使用这些坐标来放置 div?

Answer 1

我想你可以将你的图像包裹在 div 中，然后将 div 的位置设置为 relative 然后你可以将内部 div 放置到 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;
}

当然你会根据需要通过javascript设置顶部和左侧

Answer 2

您还可以绝对定位父级 div 在页面上并为父级添加背景图片。然后相对定位子 div 在父 div 中，像这样： https://embed.plnkr.co/gM2VNz/

Answer 3

你应该做一些简单的数学运算。例如，您的图像在图像的左上角显示 100,100，在图像的右下角显示 400,400，图像为 300x300。想和你pin 130130协调你会这样做 400-100是你的盒子 130-100=30/300*100=10 所以从左到上的 10% 是你的引脚位置

使用地图区域的 coords 属性将 div 放置在特定坐标处

Place div at specific coordinates using something like the coords attribute of a map area

html

css

dictionary

area