0

我有一个居中的图像。最重要的是，我想定位各种可点击的点。我正在尝试以最灵敏的方式做到这一点，但到目前为止，我还没有运气。有人可以提供一些见解吗？我不想为此被标记，但我很难找到答案。

这是我的 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%;
}
4

1 回答 1

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>
于 2013-09-26T17:08:44.650 回答