html span 浮动,确定span元素的绝对定位浮动div的位置

我需要在span元素上创建一个“弹出”div。确定span元素的绝对定位浮动div的位置

我尝试确定其位置和大小以给出正确的边界以放置浮动div。

text a

test hello world

我试图获得这些信息元素id=test

我尝试了两种方法：

首先，我得到跨度

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

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中使用便携式解决方案。

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

2013-02-12

Artyom

+0

你可能想提一下你测试过的浏览器。我把你的代码保存下来，然后在Firefox 18，Chrome 24甚至IE10上运行它，并得到了预期的结果：[237,269,548,567]。除了Chrome之外，第二种方法返回的是浮点坐标而不是整数，但是它们相差半个像素。 其实，我刚刚意识到，您使用的方法不包括滚动位置，所以请尝试添加。 –

2013-02-12 17:27:25