javascript - 如何获得嵌套div的相对距离？

Question

小提琴<---见小提琴

在这里，我想返回两个 div 与其父 div 的相对距离。似乎.offsetTop无法返回正确答案。我预期的结果被标记为绿线，距离为 2 和 3。

奇怪的是，为什么他们的父 div 的边框也包含在 of 中.offsetTop？

谢谢！

Answer 1

如果你给 .paper{ position:relative }，那么孩子们会有相对于它的坐标偏移量怎么办？

http://codepen.io/snypelife/pen/AqtIC

Answer 2

你不能也减去父母的偏移量：

var re = document.getElementById("result");

var num2 = document.getElementById("2");
var num2Parent = num2.parentNode;

var num3 = document.getElementById("3");
var num3Parent = num3.parentNode;
re.innerHTML="position:<br/>box1 = "+ (num2.offsetTop - num2Parent.offsetTop)+"<br/>box2 = "+ (num3.offsetTop - num3Parent.offsetTop) ;