Javascript 当主体可以相对定位时，如何计算dom元素的页面位置？

我有一个奇怪的bug，当我将body设置为一个相对定位的元素，有39px的边距时（我正在为页面顶部的工具栏腾出空间），它开始出现

无论如何-如果您查看大多数站点如何告诉您计算页面元素位置，您将看到如下代码：

function getPos(elt) {
    var pt = [0, 0];

    while (elt.offsetParent !== null) {
        pt[0] += elt.offsetLeft;
        pt[1] += elt.offsetTop;
        elt = elt.offsetParent;
    }
    return pt;
}

这很好，即使您的标记有一个边距。但是，如果您的body也是position:relative，那么它将返回一个太小的值，它不包括body元素的边距

我如何1）检测身体是否处于相对位置，2）找到我们的边缘是什么，以便我可以将它们添加回

---

请注意，我需要页面坐标，以便将它们与MouseEvent PageX，PageY进行比较。

好的，我只是在这方面做了更多的研究。简短的回答是，使用jQuery：

$(elt).offset()

这是一个复杂的领域，jQuery有很多代码来正确处理所有情况（请参阅）。我认为大多数浏览器都支持getClientBoundingRect——在这种情况下，jQuery将使用它（但必须根据视口滚动位置进行调整）。否则，它会根据主体的计算样式进行调整（是，$（elt）。css（‘margin-left’）将返回计算样式），以及中间元素上的任何边框

因此，长话短说的答案是——除非您想从jQuery或其他框架中重新发明100多行代码——最好使用他们的代码来获得这种度量，而不是编写自己的代码

这里有一个小提琴手展示了一些其他的方法（扩展自蛇浮士德的-谢谢！）：

---

顺便说一句，Snake与父容器的偏移量是$（elt）.position（）$（elt）.offset（）返回相对于页面/文档的偏移量-这就是我在这里要查找的内容。

如果您限制自己只在“现代”浏览器中工作，就像zepto.js实现那样，您可以得到一个更小的.offset（）函数实现：

offset: function(){
      var obj = this[0].getBoundingClientRect();
      return {
        left: obj.left + document.body.scrollLeft,
        top: obj.top + document.body.scrollTop,
        width: obj.width,
        height: obj.height
      };
    }

如果getBoundingClientRect可用，这或多或少就是jQuery所做的