具有相同坐标的JS div具有不同的偏移量答案

【问题标题】：JS divs with equal coordinates have different offset具有相同坐标的JS div具有不同的偏移量
【发布时间】：2016-01-08 20:16:25
【问题描述】：

在客户单击指向地图上某个地点的小点状 div（7x7px 黑色背景）后，我试图显示带有一些信息的 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”时，info div 会出现在点 div 下方 30px 处，但是当我点击“ruse”时，info div 会显示在点下方。我检查了 Firefox 和 SeaMonkey 浏览器，它们的行为相同。

我试图将脚本放在 jsfiddle 中，但它在页面左上角显示了所有信息 div，我无法解决这个问题。无论如何，如果有人有兴趣jsfiddle。

info div 的坐标以字符串的形式传递给 JS 函数，它们与 dot div 的坐标相同（我将 css 保留在 html 文件中的原因之一）。我希望对JS有更好理解的人能够解释这一点。

【问题讨论】：

当我查看它时，它们都显示在左上角。
是的，我想我在 JS 中的坐标后面缺少“px”。只需查看下面的答案即可。

标签： javascript html css

【解决方案1】：

这是因为您在 div 上使用了position:relative，这会将它们从默认位置移动。所以（因为 div 是一个块元素）诡计将在 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，就像在这个小提琴中一样：https://jsfiddle.net/wkz6dj04/7/

【讨论】：

非常感谢。我真的忘记了“相对”定位及其实际工作原理。