отзывчивое позиционирование элементов поверх центрированного элемента

Question

У меня есть изображение с центром. Вдобавок к этому, я хочу позиционировать различные кликируемые точки. Я пытаюсь сделать это самым отзывчивым способом, но до сих пор мне не повезло. Может ли кто-нибудь прокомментировать, пожалуйста? Я не хочу отмечать это, но мне трудно найти ответ.

Это мой HTML:

<img src="images/Map.png" id="map" /> 
<img class="down" id="location1" src="images/square.png"/> 
<img class="down" id="location2" src="images/square.png"/> 
<img class="down" id="location3" src="images/square.png"/> 
<img class="down" id="location4" src="images/square.png"/> 

А вот мой CSS:

#map { 
    position:relative; 
    display: block; 
    width:700px; 
    margin-top:130px; 
    margin-left:auto; 
    margin-right:auto; 
    height: 515px; 
} 
.down { 
    width: 20px; 
    height: auto; 
    position: absolute; 
    cursor:pointer; 
} 
#location1 { 
    top: 230px; 
    left: 39%; 
} 
#location2 { 
    top: 240px; 
    left: 38%; 
} 
#location3 { 
    top: 410px; 
    left: 60%; 
} 
#location4 { 
    top: 390px; 
    left: 59%; 
} 

Answer 1

Я думаю, что вам нужно обернуть все, что HTML в DIV, и использовать положение: относительное на этой DIV , На данный момент у вас есть позиция: относительная по изображению, но изображение не является родителем этих квадратов, поэтому позиция: абсолютная не будет относительно этого изображения.

<div style="position:relative; width:700px; margin:0 auto;"> 
    <img src="images/Map.png" id="map" /> 
    <img class="down" id="location1" src="images/square.png"/> 
    <img class="down" id="location2" src="images/square.png"/> 
    <img class="down" id="location3" src="images/square.png"/> 
    <img class="down" id="location4" src="images/square.png"/> 
</div>