检索 HTML 元素的位置 (X,Y)答案

【问题标题】：Retrieve the position (X,Y) of an HTML element检索 HTML 元素的位置 (X,Y)
【发布时间】：2010-10-01 08:11:08
【问题描述】：

我想知道如何在 JavaScript 中获取 img 和 div 等 HTML 元素的 X 和 Y 位置。

【问题讨论】：

我一直在使用这 7 行代码，它们适用于所有浏览器，但在 ie5、6、7 中存在差异（我不记得有任何问题...可能是文档类型）... quirksmode.org/js/findpos.html 多年来我一直在使用它。可能有人可以指出缺陷（如果有的话）。
@AnthonyWJones，我想你需要迂腐的乐趣，但很明显，就像未指定时一样，OP 指的是最一般的情况，或者指的是浏览器的窗口坐标.
@Mote，不，不是那么明显。把推理、主观性和错误的公理放在一边。它可以相对于视口或页面顶部（又名 document.documentElement）。
默认为最一般的不是推理，而是逻辑进展，因此这将与窗口相关，或者“页面顶部”可能是您所说的术语。在博弈论中，它被编码为一个称为谢林点的概念。请务必说明您的意思不是最一般的情况。
重点是，对某些人来说显而易见的事情对其他人来说并不明显。即使理论上我们知道是哪种情况，但由于经验知识，这里的清晰度不会伤害任何人，特别是对于那些刚开始编程的人。

【解决方案1】：

这个函数返回一个元素相对于整个文档（页面）的位置：

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

使用这个我们可以得到X位置：

getOffset(element).left

... 或 Y 位置：

getOffset(element).top

【讨论】：

【解决方案2】：

要得到一个元素的总偏移量，你可以递归地总结所有的父偏移量：

function getParentOffset(el): number {
if (el.offsetParent) {
    return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
    return 0;
}
}

使用此实用函数，dom 元素的总顶部偏移量为：

el.offsetTop + getParentOffset(el);

【讨论】：

这个答案看起来像我想要的，除了我收到错误“Uncaught ReferenceError: getParentOffset is not defined”。缺少一个's'，是吗？所以我更改了函数返回行，将“s”添加到“getParentOffset”。现在没有错误，但知道有错误让我担心......
ty 为错字注释，代码 sn-p 已更新

【解决方案3】：

这是一个使用 vanilla JS 递归迭代 element.offsetTop 和 element.offsetParent 的现代 1-liner：

功能：

getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent))

用法：

const el = document.querySelector('#div_id');
const elTop = getTop(el)

优势：

无论当前滚动位置如何，始终返回绝对垂直偏移量。

传统语法：

function getTop(el) {
  return el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
}

【讨论】：

谢谢，找到 offsetParent 的 offsetTop 帮助我找到了正确的位置。

【解决方案4】：

HTML program to show (x, y) of an
element by dragging mouse over it  you just copied it and use it on your own 
<!DOCTYPE html>
<html>
    <head>
        <title>
            position of an element
        </title>
        
        <!-- scropt to get position -->
        <script type = "text/javascript">
            function getPositionXY(element) {
                var rect = element.getBoundingClientRect();
                document.getElementById('text').innerHTML
                = 'X: ' + rect.x + '<br>' + 'Y: ' + rect.y;
            }
        </script>
    </head>
    
    <body>
        <p>Move the mouse over the text</p>
        
        <div onmouseover = "getPositionXY(this)">
            Position:
            <p id = 'text'></p>
        </div>
    
    </body>
</html>

【讨论】：

【解决方案5】：

/**
 *
 * @param {HTMLElement} el
 * @return {{top: number, left: number}}
 */
function getDocumentOffsetPosition(el) {
    var position = {
        top: el.offsetTop,
        left: el.offsetLeft
    };
    if (el.offsetParent) {
        var parentPosition = getDocumentOffsetPosition(el.offsetParent);
        position.top += parentPosition.top;
        position.left += parentPosition.left;
    }
    return position;
}

感谢ThinkingStiff the answer，这只是另一个版本。

【讨论】：

【解决方案6】：

这很简单，在 JS 中只有两行代码：

var elem = document.getElementById("id");    
alert(elem.getBoundingClientRect());

【讨论】：

此答案不完整，不会对之前的答案添加任何内容。

【解决方案7】：

如果您只想在 javascript 中完成，这里有一些 one liner 使用 getBoundingClientRect()

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y

window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X

第一行将返回 offsetTop 说 Y 相对于文档。第二行将返回 offsetLeft 说 X 相对于文档。

getBoundingClientRect()是一个javascript函数，它返回元素相对于窗口视口的位置。

【讨论】：

【解决方案8】：

如果页面包含 - 至少 - 任何“DIV”，meouw 给出的函数会抛出超出当前页面限制的“Y”值。为了找到确切的位置，您需要同时处理 offsetParent 和 parentNode。

尝试下面给出的代码（已检查 FF2）：


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};

【讨论】：

与其他解决方案一样，即使使用 FF 24.4，当边框宽度作为定位布局的一部分存在时，上述代码也不起作用。
你是救生员。我现在正在处理一些非常深的 GWT 错误并将其放入 JSNI 方法中解决了我所有的问题！

【解决方案9】：

虽然在这么多答案的底部很可能会丢失这一点，但这里的顶级解决方案对我不起作用。
据我所知，其他任何答案都没有帮助。

情况：
在 HTML5 页面中，我有一个菜单，它是标题内的导航元素（不是标题，而是另一个元素中的标题）。
一旦用户滚动到它，我希望导航保持在顶部，但在此之前，标题是绝对定位的（所以我可以让它稍微覆盖其他东西）。
上述解决方案从未触发更改，因为 .offsetTop 不会更改，因为这是一个绝对定位元素。此外，.scrollTop 属性只是最顶部元素的顶部......也就是说 0 并且始终为 0。
我使用这两个执行的任何测试（与 getBoundingClientRect 结果相同）都不会告诉我导航栏的顶部是否曾经滚动到可查看页面的顶部（再次，如控制台中报告的那样，它们在滚动时只是保持相同的数字发生了）。

解决方案
我的解决方案是利用

window.visualViewport.pageTop

pageTop 属性的值反映了屏幕的可视部分，因此我可以跟踪元素相对于可视区域边界的位置。

可能没有必要说，每当我处理滚动时，我都希望使用此解决方案以编程方式响应被滚动元素的移动。
希望对其他人有所帮助。
重要提示：This appears to work in Chrome and Opera currently & definitely not in Firefox (6-2018)... 在 Firefox 支持 visualViewport 之前，我建议不要使用这种方法，（我希望他们很快就会这样做......它比其他方法更有意义）。

更新：
只是有关此解决方案的说明。
虽然我仍然发现我发现对于“...以编程方式响应正在滚动的元素的移动”的情况非常有价值。适用。我遇到的问题的更好解决方案是使用 CSS 在元素上设置 position: sticky。使用粘性，您可以在不使用 javascript 的情况下使元素保持在顶部（注意：有时这不会像将元素更改为固定那样有效，但对于大多数用途而言，粘性方法可能会更好）

UPDATE01：
所以我意识到，对于一个不同的页面，我需要在一个稍微复杂的滚动设置中检测元素的位置（视差加上作为消息的一部分滚动过去的元素）。在那种情况下，我意识到以下提供了我用来确定何时做某事的价值：

  let bodyElement = document.getElementsByTagName('body')[0];
  let elementToTrack = bodyElement.querySelector('.trackme');
  trackedObjPos = elementToTrack.getBoundingClientRect().top;
  if(trackedObjPos > 264)
  {
    bodyElement.style.cssText = '';
  }

希望这个答案现在更有用。

【讨论】：

当您点击 active 对答案进行排序时，这很可能位于众多答案的顶部
@lucchi :D 好吧，我想我可以删除 @ 顶部的文字......虽然我刚刚又遇到了这个问题，并意识到我已经为自己的问题找到了更好的解决方案...... . 虽然我的回答更像是对更完整答案的注脚。我怀疑我的要求可能并不常见，以至于其他答案对我不起作用？
无论如何我都很感谢你的回答，只是想告诉你，任何愿意的人都会知道你写了一些新东西。你并不孤单......

【解决方案10】：

获取 div 相对于左侧和顶部的位置

  var elm = $('#div_id');  //get the div
  var posY_top = elm.offset().top;  //get the position from top
  var posX_left = elm.offset().left; //get the position from left

【讨论】：

我投了反对票，因为底部和右侧不是 offset() 的属性
@MacroMan，我尊重你的决定，但我已经在文中解释了“代码的底部和右侧没有经过测试。”。另外，我会很快更新我的代码。
我认为是 el.offsetTop 和 el.offsetLeft （OP 没有说任何关于 jQuery 的内容......我不确定你的答案为什么也使用 jQuery......）

【解决方案11】：

正确的做法是使用element.getBoundingClientRect():

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

只要您可能关心它，Internet Explorer 就一直支持这一点，并且最终在 CSSOM Views 中标准化。所有其他浏览器都采用了它a long time ago。

一些浏览器也返回高度和宽度属性，虽然这是非标准的。如果您担心旧版浏览器的兼容性，请查看此答案的修订版以获得优化的降级实现。

element.getBoundingClientRect() 返回的值是相对于视口的。如果你需要它相对于另一个元素，只需从另一个矩形中减去一个矩形：

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

【讨论】：

一个very interesting article on JS coordinates。 SO上没有提到这篇文章，应该..

【解决方案12】：

这样的事情怎么样，通过传递元素的ID，它会返回left或top，我们也可以将它们组合起来：

1) 向左寻找

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2) 查找顶部

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

或3）一起查找left和top

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');

【讨论】：

【解决方案13】：

jQuery .offset() 将获取第一个元素的当前坐标，或者设置匹配元素集中每个元素相对于文档的坐标。

【讨论】：

由于某种原因，与其他浏览器相比，它在 IE 中给出的结果不同。我认为在 IE 中它给出了相对于窗口的位置，所以如果你滚动，与其他人相比，你会在 IE 中得到不同的结果
offset() 被缩放混淆了，至少在 Android Chrome 中是这样，所以它没用。 stackoverflow.com/a/11396681/1691517 显示了缩放容错方式。

【解决方案14】：

您可以向Element.prototype 添加两个属性以获取任何元素的顶部/左侧。

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

这是这样称呼的：

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

这是一个与 jQuery 的 offset().top 和 .left 比较结果的演示：http://jsfiddle.net/ThinkingStiff/3G7EZ/

【讨论】：

修改Element.prototype 通常被认为是一个坏主意。这导致代码很难维护。此外，此代码不考虑滚动。

【解决方案15】：

小与小的区别

function getPosition( el ) {
    var x = 0;
    var y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
    }
    return { top: y, left: x };
}

看一个示例坐标： http://javascript.info/tutorial/coordinates

【讨论】：

不幸的是，这不适用于现代 HTML 文档中可能找到的所有元素。例如，嵌入的<svg> 元素没有offsetLeft、offsetTop 和offsetParent 属性。
它只是DIV 或IMG，而不是SVG。查看“查看示例坐标”？你可以发现对象 svg 是位置调用 getOffsetRect，尝试依赖对象工作。

【解决方案16】：

我接受了@meouw 的回答，添加到允许边框的clientLeft 中，然后创建了三个版本：

getAbsoluteOffsetFromBody - 类似于@meouw，获取相对于文档正文或 html 元素的绝对位置（取决于 quirks 模式）

getAbsoluteOffsetFromGivenElement - 返回相对于给定元素的绝对位置 (relativeEl)。请注意，给定元素必须包含元素 el，否则其行为与 getAbsoluteOffsetFromBody 相同。如果您有两个元素包含在另一个（已知）元素中（可选地，节点树上的几个节点）并希望使它们处于相同位置，这将很有用。

getAbsoluteOffsetFromRelative - 返回相对于第一个具有 position: relative 的父元素的绝对位置。这类似于 getAbsoluteOffsetFromGivenElement，原因相同，但只会到达第一个匹配元素。

getAbsoluteOffsetFromBody = function( el )
{   // finds the offset of el from the body or html element
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromGivenElement = function( el, relativeEl )
{   // finds the offset of el from relativeEl
    var _x = 0;
    var _y = 0;
    while( el && el != relativeEl && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}

getAbsoluteOffsetFromRelative = function( el )
{   // finds the offset of el from the first parent with position: relative
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
    {
        _x += el.offsetLeft - el.scrollLeft + el.clientLeft;
        _y += el.offsetTop - el.scrollTop + el.clientTop;
        el = el.offsetParent;
        if (el != null)
        {
            if (getComputedStyle !== 'undefined')
                valString = getComputedStyle(el, null).getPropertyValue('position');
            else
                valString = el.currentStyle['position'];
            if (valString === "relative")
                el = null;
        }
    }
    return { top: _y, left: _x };
}

如果您仍然遇到问题，尤其是与滚动有关的问题，您可以尝试查看 http://www.greywyvern.com/?post=331 - 我注意到 getStyle 中至少有一段有问题的代码，假设浏览器运行正常，但尚未测试其余代码完全没有。

【讨论】：

有趣...但是在 Edge 上 getAbsoluteOffsetFromBody(element).top 在我滚动时返回不同的值，在 Chrome 中它在我滚动时保持一致。似乎 Edge 正在调整滚动位置。当元素滚动出视图时，我得到一个负值。
getAbsoluteOffsetFromRelative 让我很开心，我不得不在没有引导程序的 Javascript 的情况下重现引导工具提示，这对我帮助很大。
以防万一 Meouw 更改用户名，回复链接：stackoverflow.com/a/442474/3654837。（我不想碰这个旧线程所以是的，我发表评论）

【解决方案17】：

库不遗余力地为元素获取准确的偏移量。
这是一个简单的函数，可以在我尝试过的所有情况下完成这项工作。

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;

【讨论】：

更改：el = el.parentNode 为：el = el.offsetParent;现在它似乎适用于嵌套 iframe...我想这就是你的意图？

【解决方案18】：

只是想我也会把它扔出去。
我无法在较旧的浏览器中对其进行测试，但它可以在前 3 名中的最新版本中使用。:)

Element.prototype.getOffsetTop = function() {
    return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop;
};
Element.prototype.getOffsetLeft = function() {
    return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft;
};
Element.prototype.getOffset = function() {
    return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()};
};

【讨论】：

【解决方案19】：

经过大量研究和测试，这似乎可行

function getPosition(e) {
    var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1);
    var x = 0, y = 0;
    while (e) {
        x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0);
        y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0);
        e = e.offsetParent;
    }
    return { x: x + window.scrollX, y: y + window.scrollY };
}

见http://jsbin.com/xuvovalifo/edit?html,js,output

【讨论】：

【解决方案20】：

我这样做是为了与旧浏览器交叉兼容。

// For really old browser's or incompatible ones
    function getOffsetSum(elem) {
        var top = 0,
            left = 0,
            bottom = 0,
            right = 0

         var width = elem.offsetWidth;
         var height = elem.offsetHeight;

        while (elem) {
            top += elem.offsetTop;
            left += elem.offsetLeft;
            elem = elem.offsetParent;
        }

         right = left + width;
         bottom = top + height;

        return {
            top: top,
            left: left,
            bottom: bottom,
            right: right,
        }
    }

    function getOffsetRect(elem) {
        var box = elem.getBoundingClientRect();

        var body = document.body;
        var docElem = document.documentElement;

        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

        var clientTop = docElem.clientTop;
        var clientLeft = docElem.clientLeft;


        var top = box.top + scrollTop - clientTop;
        var left = box.left + scrollLeft - clientLeft;
        var bottom = top + (box.bottom - box.top);
        var right = left + (box.right - box.left);

        return {
            top: Math.round(top),
            left: Math.round(left),
            bottom: Math.round(bottom),
            right: Math.round(right),
        }
    }

    function getOffset(elem) {
        if (elem) {
            if (elem.getBoundingClientRect) {
                return getOffsetRect(elem);
            } else { // old browser
                return getOffsetSum(elem);
            }
        } else
            return null;
    }

更多关于 JavaScript 坐标的信息：http://javascript.info/tutorial/coordinates

【讨论】：

【解决方案21】：

由于不同的浏览器以不同的方式呈现边框、填充、边距等。我写了一个小函数来检索每个根元素中特定元素的顶部和左侧位置，你想要的精确尺寸：

function getTop(root, offset) {
    var rootRect = root.getBoundingClientRect();
    var offsetRect = offset.getBoundingClientRect();
    return offsetRect.top - rootRect.top;
}

要检索左侧位置，您必须返回：

    return offsetRect.left - rootRect.left;

【讨论】：

【解决方案22】：

我发现的最简洁的方法是 jQuery 的offset 使用的技术的简化版本。与其他一些答案类似，它以getBoundingClientRect 开头；然后它使用window 和documentElement 来调整滚动位置以及body 上的边距（通常是默认值）。

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

var els = document.getElementsByTagName("div");
var docEl = document.documentElement;

for (var i = 0; i < els.length; i++) {

  var rect = els[i].getBoundingClientRect();

  var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
  var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

  els[i].innerHTML = "<b>" + rectLeft + ", " + rectTop + "</b>";
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}
#rel {
  position: relative;
  left: 10px;
  top: 10px;
}
#abs {
  position: absolute;
  top: 250px;
  left: 250px;
}

<div id="rel"></div>
<div id="abs"></div>
<div></div>

【讨论】：

【解决方案23】：

我成功地使用了 Andy E 的解决方案来定位引导程序 2 模式，具体取决于用户单击表格行中的链接。该页面是 Tapestry 5 页面，下面的 javascript 是在 java 页面类中导入的。

javascript：

function setLinkPosition(clientId){
var bodyRect = document.body.getBoundingClientRect(),
elemRect = clientId.getBoundingClientRect(),
offset   = elemRect.top - bodyRect.top;
offset   = offset + 20;
$('#serviceLineModal').css("top", offset);

}

我的模态代码：

<div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static" 
 tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3 id="myModalLabel">Modal header</h3>
</div>

<div class="modal-body">
    <t:zone t:id="modalZone" id="modalZone">
        <p>You selected service line number: ${serviceLineNumberSelected}</p>
    </t:zone>
</div>

<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <!-- <button class="btn btn-primary">Save changes</button> -->
</div>

循环中的链接：

<t:loop source="servicesToDisplay" value="service" encoder="encoder">
<tr style="border-right: 1px solid black;">       
    <td style="white-space:nowrap;" class="add-padding-left-and-right no-border"> 
        <a t:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber" 
            t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}"
            onmouseover="setLinkPosition(this);">
            <i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} -->
        </a>
    </td>

以及页面类中的java代码：

void onServiceLineNumberSelected(String number){
    checkForNullSession();
    serviceLineNumberSelected = number;
    addOpenServiceLineDialogCommand();
    ajaxResponseRenderer.addRender(modalZone);
}

protected void addOpenServiceLineDialogCommand() {
    ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
        @Override
        public void run(JavaScriptSupport javascriptSupport) {
            javascriptSupport.addScript("$('#serviceLineModal').modal('show');");
        }
    });
}

希望这对某人有所帮助，这篇文章有所帮助。

【讨论】：

这个 js 代码帮助了我，我有一个旧的 webforms 应用程序使用多个占位符注入 .aspx 页面，我无法弄清楚如何将我创建的弹出框的 appendChild() 放入视口，因为整个 DOM 树被多个占位符和不正确的标记所破坏。使用 body.getBoundingClientRect() 然后在定位中使用它的顶部是我需要的。谢谢。

【解决方案24】：

有效地检索相对于页面的位置，并且不使用递归函数：（也包括 IE）

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

【讨论】：

包括所有重要的 scrollTop/scrollLeft 使这个答案更正确。

【解决方案25】：

如果您使用的是 jQuery，这可能是一个简单的解决方案：

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>

【讨论】：

【解决方案26】：

这是我设法创建的最好的代码（也适用于 iframe，与 jQuery 的 offset() 不同）。似乎 webkit 的行为有点不同。

根据 meouw 的评论：

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        // chrome/safari
        if ($.browser.webkit) {
            el = el.parentNode;
        } else {
            // firefox/IE
            el = el.offsetParent;
        }
    }
    return { top: _y, left: _x };
}

【讨论】：

请注意，您需要jQuery 才能使用$.browser.webkit；您需要使用navigator.userAgent 来处理纯JavaScript。
$.browser 在最新版本的 jQuery 中不再可用
不幸的是，即使使用 FF 24.4，当边框宽度作为定位布局的一部分存在时，上述代码也不起作用。

【解决方案27】：

如果使用 jQuery，dimensions plugin 非常好，可以让您准确指定您想要的内容。

例如

相对位置、绝对位置、不带填充的绝对位置、带填充...

它继续，我们只是说你可以用它做很多事情。

加上使用 jQuery 的好处是它的文件大小轻巧且易于使用，以后没有它你就不会回到 JavaScript。

【讨论】：

【解决方案28】：

使用 JavaScript 框架可能会更好地为您服务，该框架具有以独立于浏览器的方式返回此类信息（以及更多！）的功能。以下是一些：

使用这些框架，您可以执行以下操作： $('id-of-img').top 获取图像的 y 像素坐标。

【讨论】：

【解决方案29】：

大多数浏览器上的 HTML 元素将具有：-

offsetLeft
offsetTop

这些指定元素相对于其最近的具有布局的父元素的位置。如果有 offsetParent 属性，则通常可以访问此父级。

IE和FF3都有

clientLeft
clientTop

这些属性不太常见，它们使用其父客户区指定元素位置（填充区域是客户区的一部分，但边框和边距不是）。

【讨论】：