定位元素始终保持在同一个地方

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高度和宽度创建一个fra我的地图可以放在全尺寸的地方进行滚动。

JsFiddle