在客户点击指向 map 上某个位置的小点状 div(7x7 像素黑色背景)后，我试图显示带有一些信息的 div。它有效，但点状 div 和信息 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“plovdiv”时，信息 div 出现在点 div 下方约 30px 处，但是当我单击“ruse”时，信息 div 显示在点正下方。我在 Firefox 和 SeaMonkey 浏览器中都进行了检查，它们的行为相同。
我试图将脚本放在 jsfiddle 中，但它在页面左上角显示了所有信息 div，我无法解决这个问题。无论如何，如果有人感兴趣的话，就在这里jsfiddle .
信息 div 的坐标以字符串形式传递给 JS 函数，它们与点 div 的坐标相同(我将 css 保留在 html 文件中的原因之一)。我希望对 JS 有更好理解的人能够解释这一点。
最佳答案
这是因为您在 div 上使用了 position:relative，这会将它们从默认位置移开。所以(因为 div 是一个 block 元素)ruse 将在 plovdiv 下，而 plovdiv 将在 sofia 下，然后它们被 top 和 left 值移动。将它们全部设置为 position: absolute 并且它们将表现一致。
这是您在 jsfiddle 中运行的代码(我在您的 js 中添加了 px 单位):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 就像这个 fiddle :https://jsfiddle.net/wkz6dj04/7/
关于javascript - 具有相同坐标的JS div具有不同的偏移量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34676748/