定位元素始終保持在同一個地方

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