javascript - 如何确定绝对定位元素的容器

Question

我有一个自定义控件需要在其“主”控件主体(一个 DIV 元素)正下方呈现一个弹出窗口。我遇到的问题是如果控件不“了解”其容器设置，如何设置弹出坐标位置。

例如，拿这一段代码:

// library call to extract document-based coordinates (returns object with X and Y fields) of the "controlBodyElement" (a DIV)
var pt = some.library.getDocumentPosition(controlBodyElement)
// frame (the "popup") is a DIV pointer 
frame.style.position = "absolute"
frame.style.top = pt.y + controlBodyElement.clientHeight + 1 + "px"  // Line "A"
// frame.style.top = "0px"   // Line "B" -- finds the relativity point of absolute-position 

“A”行 - 使弹出窗口呈现在 controlBodyElement 下方
“B”行 - 在 controlBodyElement 上方呈现弹出方式。

问:应该在 DOM 树中搜索什么元素设置/属性以确定某个绝对定位的子元素相对于哪个元素锚定？

更新:我想如果有人能向我解释什么页面机制会导致绝对定位元素(使用 top = 0px)在页面中途(而不是顶部)呈现，那么我可以编写逻辑来排序事情了；我只是不确定我是否需要寻找...

Answer 1

感谢 Pumbaa80 提供的信息 - 这正是我想要弄清楚的。

以防以后对其他人有帮助，这是一个改进的定位器方法，它将提取特定的偏移坐标(而不是逻辑屏幕位置)...

// relative location from nearest Positioned ancestor
getPositionedOffset = function(element, coordinates) {
  // create a coordinates object if one was not assigned (first iteration)
  if(coordinates == undefined) { 
    coordinates = {x: 0, y: 0 }
  }

  if (element.offsetParent) {
    switch(window.getComputedStyle(element).position) {
      case "relative":
      case "absolute":
      case "fixed":
        return coordinates
      default:
        coordinates.x += element.offsetLeft
        coordinates.y += element.offsetTop
        getPositionedOffset(element.offsetParent, coordinates) // step into offsetParent
    }
  }
  return coordinates
}

注意:代码在 Chrome 中有效；在其他一些浏览器风格中运行需要进行一些小的调整。

编辑:

在大多数情况下，将使用单个参数(即元素引用)调用该函数，如下所示:

var ele = document.getElementById("foo")
var relativeLoc = getPositionedOffset(ele)

但是，如果需要考虑手动移动(例如向右 +5 像素，向上 -10 像素)，则包括第二个参数:

var relativeLocWithOffset = getPositionedOffset(ele, {x:5, y:-10})