Question

我有一个图像（它是一个地图指针https://goo.gl/RPo9qm），我想用CSS将它放在地图上的确切位置，所以它会保留在地图上的位置为什么滚动。我无法将指针和地图添加到同一图像，因为指针会有一些动画。你会怎么做？

编辑：地图也是图像

Answer 1

只需使用position:absolute;

定位地图图像和图钉

以下是可拖动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订单（地图→图钉）很重要，否则你最终会让地图覆盖Pin。

将图像放在准确的位置

1 个答案: