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

Question

I have a custom control that needs to render a pop-up window directly below its "main" control body (a DIV element). The problem I'm running into is how to set the pop-up coordinate location if the control has no "knowledge" of the its container settings.

For example, take this section of code:

// 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 

Line "A" - causes the popup to be rendered way below the controlBodyElement
Line "B" - renders the popup way above the controlBodyElement.

Q: what element setting/attribute should be searched for in the DOM tree to determine which element some absolute-positioned child is being anchored relative to?

UPDATE: I think if someone can explain to me what page mechanics would cause an absolute-positioned element (using top = 0px) to be rendered halfway down the page (instead of the top) then I can write the logic to sort things out; I'm just not sure I need to be looking for...

Answer 1

Thanks to Pumbaa80 for the information - that was exactly what I was trying to figure out.

In case it'll help someone else later, here is a revamped locator method that will extract that particular offset coordinates (as opposed to a logical screen location)...

// 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
}

NOTE: code is functional in Chrome; minor tweaking will be needed for operation in some of the other browser flavors.

EDIT:

In most cases the function will be called with a single argument (that being an element reference), like so:

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

However, if a manual shift needs to be factored in (for example +5px right, and -10px up) then include the second argument:

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