如何确定元素相对于(grand^N)父元素的位置

Question

我有元素A和B。B可以是A的直接子元素，或者它们之间可以有0到N个元素。

我需要知道B相对于A的位置，或者更具体地说:B的左上角距离A的每个边界有多远。

注意，A可以有父节点，也可以有overflow:auto设置。

如果没有更好的方法，则可以访问B和A之间的每个父节点。

我还可以迭代A:的父元素到

编辑:例子:

<div class="a">
    <div>
      foobar
      <div class="b">
      </div>
    </div>
</div>
var a = $(".a");
var b = $(".b");
var bTopLeftDistanceToATopBound = ?;
var bTopLeftDistanceToABottomBound = ?;
var bTopLeftDistanceToARightBound = ?;
var bTopLeftDistanceToALeftBound = ?;

Answer 1

成功了:

return {
    top: b.offset().top-a.offset().top,
    bottom: a.height()-
        (b.offset().top-a.offset().top),
    left: b.offset().left-a.offset().left,
    right: a.width()-
        (b.offset().left-a.offset().left)
}