使用类似地图区域的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。  你想要130,130协调 你会这样做的 400-100是你的盒子 130-100 = 30/300 * 100 = 10 所以左边和顶部的10％是你的销位置