1

我有一个自定义控件，需要在其“主”控件主体（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）在页面的中间（而不是顶部）呈现，那么我可以编写逻辑来解决问题；我只是不确定我需要寻找...

4

1 回答 1

2

感谢 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，向上 -10px），则包含第二个参数：

var relativeLocWithOffset = getPositionedOffset(ele, {x:5, y:-10})
于 2013-09-12T04:54:57.270 回答