获取Javascript中元素相对于一个祖先的位置

假设我有以下HTML代码（这是一个示例）：

应用了几个CSS。基本上，在带有

id=“site\u header\u container”

的div中，有一个

背景图像。我想知道
元素在
site\u header\u容器中有哪些顶部和左侧值

那么，我如何给一个元素，称它为祖先，另一个元素称它为后代，在纯Javascript（我不想使用任何库）中知道后代相对于其祖先的位置，并且它只能在Chrome中工作。从a元素开始，您需要向上爬升DOM层次结构，添加每个父元素的
offsetTop
和
offsetHeight
属性，直到到达父元素。
用于接收子元素和父元素的位置，然后从子元素中减去父元素的坐标

var coords = element.getBoundingClientRect();
console.log(coords.top, coords.right, coords.bottom, coords.left);

如果父坐标为（左）500，（上）500，子坐标为550550，则子坐标相对于父坐标为50，50

找到每个的位置并使用数学@Diodeus的OP说没有jQuery为什么jQuery不是“纯”JavaScript？你是说JavaScript完全是你自己写的吗？因为它没有标准化（例如，参见promises）。但我猜OP的意思是纯JavaScript（没有库依赖关系）。@Christophe这很有趣，因为为了以跨浏览器和布局场景可靠工作的方式解决这个问题，OP最终必须有一个残缺的版本：）getBoundingClientRect总是可信的吗？我的意思是，如果元素是绝对定位的，等等，它也会工作吗？我创建了一个小测试用例，并对它进行了测试。也可以这样做。：）tl；dr：在offsetParents之间循环行不通–添加每个父项的
offsetTop
将得到不正确的结果，因为
offsetTop
是相对于offsetParents的。如果采用这种方法，您将需要遍历每个offsetParent等的offsetParent，但是您可能会丢失相关的祖先（您想知道其相对位置）。
var coords = element.getBoundingClientRect();
console.log(coords.top, coords.right, coords.bottom, coords.left);