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