确定浮动 div 绝对定位的 span 元素的位置答案

【问题标题】：Determinating location of span element for absolute positioning of floating div确定浮动 div 绝对定位的 span 元素的位置
【发布时间】：2013-02-13 01:56:28
【问题描述】：

我需要在 span 元素上创建一个“弹出”div。

我尝试确定它的位置和大小，以提供正确的边界来放置浮动 div。

    <html>
    <body>
    <p>text a</p>
            <div style="padding-left:200px;padding-top:500px">
                    <table class="message">
                            <tr><td>test <span id="test">hello</span> world</td></tr>
                    </table>
            </div>
    </body>
    </html>

我尝试获取元素id=test的此信息

我尝试了两种方法：

首先我得到跨度

var span = document.getElementById('test');

比我使用Retrieve the position (X,Y) of an HTML element 提出的方法计算的要多

var x0 = 0;
var y0 = 0;
var el = span;
while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x0 += el.offsetLeft - el.scrollLeft;
    y0 += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
}
var x1 = x0 + span.offsetWidth;
var y1 = y0 + span.offsetHeight;

我也尝试使用：

var rect = span.getBoundingClientRect();
x0 = rect.left;
x1 = rect.right;
y0 = rect.top;
y1 = rect.bottom;

比我登录：

   console.log(JSON.stringify([x0,x1,y0,y1]));

在这两种情况下我都得到：

[236,264,381,401]

作为500像素表格上方的边距不能正确。

如何正确解决这个问题？

即我怎样才能在这个元素上放置一个div 和position:ablosute 位置正确吗？

注意：我不能使用 JQuery 或其他胖工具包，我需要一个平面 JavaScript 中的可移植解决方案。

编辑：我注意到如果页面需要scolling它不起作用，即页面的头部被隐藏，如何补偿？

【问题讨论】：

您可能想提及您测试的浏览器。我按原样获取您的代码并在 Firefox 18、Chrome 24 甚至 IE10 中运行它并得到了预期的结果：[237,269,548,567] .除了 Chrome，第二种方法返回浮点坐标而不是整数，但它们彼此相距半个像素。实际上，我刚刚意识到，您使用的方法不包括滚动位置，所以尝试添加它。

标签： javascript dom css-position

【解决方案1】：

您的代码看起来不错 — PPK 已发布 an article on a slightly neater way of doing it，但据我所知，它在功能上是相同的。如果他的解决方案不起作用，也许您可以尝试在 jsFiddle 上复制您的问题？

【讨论】：

不，如果页面滚动它会给出不正确的位置。

【解决方案2】：

即使你不能使用 jQuery 偏移方法或其他工具包也可以看看它。这是 jQuery 计算位置的方式（我只是修改了 win 变量并删除了元素是否存在的测试）：

function getPos(elem) {
    var docElem, win,
        box = { top: 0, left: 0 },
        doc = elem && elem.ownerDocument;
    if ( !doc ) { return; }
    docElem = doc.documentElement;
    if ( typeof elem.getBoundingClientRect !== typeof undefined ) {
        box = elem.getBoundingClientRect();
    }
    win = self;
    return {
        top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
        left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
    };
}

这是一个fiddle，用于测试（点击带有 ID#test 的 span）

【讨论】：