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

Question

Fiddle＆lt; ---见小提琴

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

奇怪的是，为什么他们的父div的边界也包含在.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) ;