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)

但是，如果需要考虑手动转换（例如+ 5px right，和-10px up），则包含第二个参数：

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

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

1 个答案: