javascript - 是否可以使用百分比相对定位将图钉图像定位在另一个图像上

Question

我想要一张国家地图，每个州议会大厦的位置都有图钉，并且想让国家地图可以调整大小，这样当它变大或变小时，图钉会自动移动到屏幕上正确的新位置。

这可以通过百分比定位来实现吗？如果图钉具有绝对位置，我只能将图钉放置在另一个图像的顶部，但是我必须在调整大小时重新计算图钉位置。

有没有办法将图钉放置在top: 50%; left 50%相对于国家地图图像或包含国家地图图像的 div 上？

Answer 1

一般来说：

将包装元素设置为position:relative.这将为绝对定位的子元素设置原点

将子元素设置为position:absolute并提供top:和left:（或右：和底部：）以像素为单位。

对于图钉，您可能想要设置 CSS 背景，而不是内联图像。

<div class="pin pinA"></div>

CSS：

.pin {
   position:absolute;
   height:20px;
   width:20px;
   background-image:url(...);
   background-repeat:no-repeat;
}

...然后使用第二类进行定位：

.pinA {
     top:50px;
     left:300px;
}

然后，您可以继续为 pinB、pinC 等输入条目。