定位元素以始终保持在同一位置

Question

如何定位元素以保持完全相同的位置？

我正在尝试将地点（图像）固定在地图上（地图也是图像）。地图图像完全覆盖视口，可以向各个方向拖动。

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

HTML：

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

CSS：

#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;
}

以下是JSFiddle

Answer 1

绝对位置可以做到这一点，但您必须指定.wrapper高度和宽度来创建一个框架，您可以将地图放置为全尺寸以进行滚动。

JsFiddle