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

Question

我怎样才能定位一个元素以保持在完全相同的位置？

我正在尝试将位置(图像)固定在 map 上( map 也是图像)。 map 图像完全覆盖视口(viewport)，可以向各个方向拖动。

这是我目前所拥有的:

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 的高度和宽度以创建一个框架，您的 map 可以在其中以全尺寸放置以便滚动。

JsFiddle