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

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等创建条目。