中心元素頂部的元素響應定位

我有一個居中的圖像。最重要的是，我想定位各種可點擊的點。我試圖以儘可能快的方式做到這一點，但到目前爲止，我沒有運氣。任何人都可以借用一些見解嗎？我不想爲此而打折，但我無法找到答案。中心元素頂部的元素響應定位

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

來源

2013-09-26 LauraNMS

特別是你有什麼麻煩？ –

如果我的屏幕分辨率改變，位置不準確。 – LauraNMS

您需要將對象的寬度作爲左側定位的響應。你有一個我們可以合作的實例嗎？ –

我認爲你需要包裝在一個div所有的HTML，以及使用的位置是：相對於在該分區。到目前爲止，你的位置是：相對於圖像，但圖像不是那些方塊的父親，所以位置：相對於該圖像絕對不會。

<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-26 17:08:44 andi

這似乎是在每個瀏覽器，但IE瀏覽器（我有IE7 - 我在工作，所以我不能更新它）工作。有沒有一些竅門可以使IE的行爲，你知道嗎？ – LauraNMS

我無法訪問IE7進行測試，但是您看到在那裏發生了什麼？ – andi

小方塊不是我放置它們的地方。 – LauraNMS

中心元素頂部的元素響應定位

回答

相關問題