html - 将图像放在确切位置

Question

我有一张图片(它是一个 map 指针 https://goo.gl/RPo9qm )，我想使用 CSS 将它放在 map 上的确切位置，这样它就会留在 map 上滚动的位置。我无法将指针和 map 添加到同一图像，因为指针会出现一些动画。你会怎么做？

编辑: map 也是一张图片

Answer 1

只需使用 position:absolute;

定位您的 map 图像和 Pin 图

这是一个带有可拖动图钉的示例:

$('#pin').draggable({
  containment: "parent"
});

#mapContainer{
  height:300px;
  position:relative; /* set to relative in order to contain absolute child elements */
  overflow:auto;     /* make scrollable! */
}
#map{
  position:absolute; /* absolute map! */
}
#pin{
  position:absolute; /* absolute pin! */
  width:50px;
  margin-left:-25px;
  left:337px;
  top:144px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="mapContainer">

  <img id="map" src="http://i.stack.imgur.com/4789V.gif">
  <img id="pin" src="http://i.stack.imgur.com/SionM.png">

</div>

P.S:HTML 顺序( map → 图钉)很重要，否则您最终将让 map 覆盖图钉。