Javascript 坐标相等的JS div具有不同的偏移量_Javascript_Html_Css

Javascript 坐标相等的JS div具有不同的偏移量

javascript html css

Javascript 坐标相等的JS div具有不同的偏移量,javascript,html,css,Javascript,Html,Css,我试图在客户端单击指向地图上某个地方的小点状div（7x7px黑色背景）后，用一些信息显示div。它可以工作，但在每个点信息对中，点状div和信息div之间的距离是不同的下面是HTML/JS脚本。请不要介意所有JavaScript和CSS都在同一个文件中，这是为了简单起见而做的，并且将在最近进行更改 <html> <head> <meta charset="utf8" /> </head> <body> <div id="po

我试图在客户端单击指向地图上某个地方的小点状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>


功能showForecast（strr）{
var分割=短期分割（“uz”）；
var xcoord=拆分[2]；
var ycoord=拆分[1]；
如果（xcoord>810）xcoord=xcoord-300；
如果（ycoord>610）ycoord=ycoord-100；
var resultDiv=document.getElementById（“结果数据”）；
resultDiv.style.visibility=“可见”；
resultDiv.style.position=“相对”；
resultDiv.style.left=xcoord；
resultDiv.style.top=ycoord；
resultDiv.innerHTML='Forecast for:'+拆分[0]；
};

所以，当我点击div“plovdiv”时，info div显示在dot div下方约30px处，但当我点击“ruse”时，info div显示在dot下方。我检查了Firefox和SeaMonkey浏览器，它们的行为完全相同

我试图将脚本放在JSFIDLE中，但它在页面左上角显示了所有的info div，我无法解决这个问题。不管怎样，只要有人感兴趣，它就在这里

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

这是因为您在div上使用了

position:relative

，这会将它们从默认位置移动。因此（因为div是一个块元素）ruse将位于plovdiv之下，plovdiv将位于sofia之下，然后它们将被

顶部

和

左侧

值移动。让它们都

position:absolute

，它们的行为就会一致

以下是您在JSFIDLE中工作的代码（我在js中添加了px单元）：

以下是处理上述修改的代码：

如果你想让间隙恢复，我建议在你的

#result_数据上使用margin top
，就像这把小提琴：当我查看它时，它们都显示在左上角。是的，我想我在JS中的坐标后面缺少了“px”。请看下面的答案，这是固定的。非常感谢。我真的忘记了“相对”定位以及它的实际工作原理。
#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;
}