具有相同座標的JS div具有不同的偏移量

我試圖在客戶端點擊指向地圖上某個地方的小點狀div（7x7px黑色背景）後顯示帶有一些信息的div。它可以工作，但點狀div與信息div之間的距離在每個點信息情侶中都不相同。具有相同座標的JS div具有不同的偏移量

這是HTML/JS腳本。請不要介意所有的JavaScript和CSS都在同一個文件中，這是爲了簡單起見而做的，最近會有所改變。

<html> 
<head> 
<meta charset="utf8" /> 
</head> 
<body> 

<div id="pointer_div" 
onclick="getClickPosition(event)" 
style="position:absolute; top:1px; left:1px; border: 1px solid black; 
    background-repeat: no-repeat; width: 1146px; height: 714px;" > 

    <div id="sofia" 
    onclick="showForecast('Sofia_381_178')" 
    style="position:relative; top: 381px; left: 178px; 
    background:black; width: 7px; height: 7px;" ></div> 

    <div id="plovdiv" 
    onclick="showForecast('Plovdiv_512_435')" 
    style="position:relative; top: 512px; left: 435px; 
    background:black; width: 7px; height: 7px;" ></div> 

    <div id="ruse" 
    onclick="showForecast('Ruse_77_662')" 
    style="position:relative; top: 77px; left: 662px; 
    background:black; width: 7px; height: 7px;" ></div> 

    <div id="result_data" 
    style="visibility:hidden; width:300px; height:100px; 
     border: 1px solid black; background:white;"/></div> 
</div> 

<script language="JavaScript"> 

function showForecast (strr) { 
var splits = strr.split('_'); 
var xcoord = splits[2]; 
var ycoord = splits[1]; 

    if (xcoord>810) xcoord= xcoord-300; 
    if (ycoord>610) ycoord= ycoord-100; 

var resultDiv= document.getElementById("result_data"); 
resultDiv.style.visibility="visible"; 
resultDiv.style.position = "relative"; 
resultDiv.style.left = xcoord; 
resultDiv.style.top = ycoord; 
resultDiv.innerHTML = 'Forecast for: ' + splits[0]; 
}; 

</script> 
</body> 
</html>

所以，當我點擊格「普羅夫迪夫」，信息DIV出現點DIV下面的一些30PX，但是當我點擊「詭計」的信息DIV顯示右點下方。我在Firefox和SeaMonkey瀏覽器中都檢查過它們，它們的行爲完全相同。

我試圖把腳本放在jsfiddle中，但它顯示頁面左上角的所有信息div，我無法修復。無論如何，如果有人對此感興趣jsfiddle。

info div的座標以字符串的形式傳遞給JS函數，它們與點div相同（我在html文件中保留css的原因之一）。我希望能更好地理解JS的人能夠解釋這一點。

來源

2016-01-08 ERIK_SON

當我查看它時，它們都顯示在左上角。 –

是的，我想我錯過了座標後的「px」。只要看看下面的答案，那裏是固定的。 –

這是因爲您在div上使用了position:relative，這會將它們從默認位置移開。所以（因爲div是一個塊元素）將會在plovdiv下，這將在sofia下，然後它們被top和left值所移動。讓他們全部position: absolute，他們會表現一致。

這裏是你的代碼的jsfiddle工作（我加PX單位的JS）：https://jsfiddle.net/wkz6dj04/5/

#sofia { 
    position: absolute; 
    top: 381px; 
    left: 178px; 
    background: black; 
    width: 7px; 
    height: 7px; 
} 

#plovdiv { 
    position: absolute; 
    top: 512px; 
    left: 435px; 
    background: black; 
    width: 7px; 
    height: 7px; 
} 

#ruse { 
    position: absolute; 
    top: 77px; 
    left: 662px; 
    background: black; 
    width: 7px; 
    height: 7px; 
}

下面是與上面的修改工作代碼：https://jsfiddle.net/wkz6dj04/6/

如果你想差距回來，我建議在你的#result_data上使用margin-top，就像這個小提琴一樣：https://jsfiddle.net/wkz6dj04/7/

來源

2016-01-08 12:16:25 gaynorvader

非常感謝。我真的忘了「相對」定位以及它的實際工作原理。 –

具有相同座標的JS div具有不同的偏移量

回答

相關問題