Question

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

我需要动态放置标志，我只知道放置标志的位置。

如何将旗帜放置在地图图像的指定像素处？

Answer 1

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

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

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

.flag元素可以包含您的旗帜图片，作为背景图片，字体图标或内嵌图像。

如果要动态创建.flag元素，可以使用内联样式设置顶部/左侧偏移。我只使用课程来插画。

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

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

1 个答案: