是否可以使用百分比相對定位將推針圖像定位在另一幅圖像上

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等