javascript - 在 Javascript 中获取节点 CSS 绝对位置

Question

我正在尝试使用 Javascript 在另一个节点旁边(在内容之上)显示一个节点。我无法更改此节点的文档结构，我需要将新节点插入同一父节点下。我想使用 position:absolute 来定位新节点，但似乎很难找到引用节点位置。在引用节点上使用 getBoundingClientRect() 不起作用，因为该节点可能位于具有 position:relative 或 position:absolute 的祖先内部，并且 getBoundingClientRect() 返回相对于文档的位置，不能用作 CSS 位置的坐标:绝对。

为了找到 CSS 绝对位置，我真的必须遍历祖先以找到第一个具有 position:absolute 或 position:relative 的祖先，还是有更简单的方法来获取此信息？

注意:我正在寻找纯 Javascript 的答案。

更新:换句话说，我正在寻找元素在其 CSS 位置更改为“绝对”时必须显示在同一位置的顶部/左侧像素位置。 offsetTop/offsetLeft 不是答案，因为该元素可能位于表格内，在这种情况下，offsetParent 是表格单元格。

Answer 1

这是一个递归的解决方案:

function getCSSAbsolutePosition(el) {
  var pos= ('absolute relative').indexOf(getComputedStyle(el).position) == -1,
      rect1= {top: el.offsetTop * pos, left: el.offsetLeft * pos},
      rect2= el.offsetParent ? getCSSAbsolutePosition(el.offsetParent) : {top:0,left:0};

  return {top: rect1.top + rect2.top,
          left: rect1.left + rect2.left,
          width: el.offsetWidth,
          height: el.offsetHeight
         };
}

在this Fiddle , 需要突出显示红色的句子。单击该按钮，将调用 getCSSAbsolutePosition 以获取其坐标、宽度和高度。一个新的 div 被放置在它下面(带有一个负的 z-Index)，它有一个背景和边框。

请注意，“目标”div 位于相对定位的 div 内的绝对定位表格内，应用了各种填充和边距。