html - 元素在居中元素之上的响应式定位

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 上使用 position:relative。截至目前，您在图像上有 position:relative，但图像不是那些正方形的父级，因此 position:absolute 不会相对于该图像。

<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>