Html 放置图元以始终保持在同一位置

我如何定位一个元素使其保持在完全相同的位置

我正在尝试将位置（即图像）固定在地图上（地图也是图像）。地图的图像完全覆盖视口，可以向所有方向拖动

这就是我到目前为止所做的：

HTML:

---

这是绝对位置，但您必须指定

.wrapper

高度和宽度，以创建一个框架，在该框架中，您的地图可以完全放置以进行滚动

---

相对于视口、文档或地图图像的相同位置？@Rounin相对于地图图像的相同位置。您的代码似乎正常，除非移动地图时出现问题。那么您的Q是什么？！！！！！！！！！！我加了小提琴，你可以看看。。。当我拖动地图时，红方块应该保持在原来的位置……我编辑了我的帖子并添加了JSFIDLE。我也增加了宽度和高度的包装，但它仍然没有做的把戏。。。

<div id="wrapper">
   <div id="map">
       <div id="location"></div>
   </div>
</div>

#map{
 background-image: url("img/map_background.jpg");
 width: 100vw;
 height:100vh;
 background-repeat: no-repeat;
 position:relative;
 cursor: move;
}

#location{
 background-image: url("img/location_map.png");
 width:100px;
 height:100px;
 position:absolute;
 top:100px;
 left:100px;
}