如何将图像放置在网页上其他图像的指定像素处

Question

我想把标志的图像放在地图图像的指定位置地图足够大，并且使用jquery滑块一次只显示地图图像的一部分。

我需要动态放置标志，并且我只知道它要放置的位置的像素。

如何将标志放置在地图图像的指定像素

Answer 1

一种方法是使用绝对定位，如下例所示。

将地图图像放在具有position: relative的块级容器中。

使用绝对位置将旗帜元素放置在需要的位置。

.flag元素可以包含作为背景图像的标志图像，字体图标或内联图像。

如果要动态创建.flag元素，则可以使用内联样式设置顶部/左侧偏移。我使用的课程只是为了幻觉。

.mapPanel {
  border: 1px dotted blue;
  width: 500px;
  height: 400px;
  position: relative;
  overflow: auto;
  }
.mapPanel > img {
  display: block;
  }
.mapPanel .flag {
  width: 10px;
  height: 10px;
  border: 1px solid red;
  background-color: yellow;
  position: absolute;
  display: block;
  }
.mapPanel .f1 {
  top: 100px;
  left: 100px;
  }
.mapPanel .f2 {
  top: 400px;
  left: 800px;
  }

<div class="mapPanel">
  <img src="http://placekitten.com/1000/500">
  <span class="flag f1"></span>
  <span class="flag f2"></span>
</div>