代码之家 › 专栏 › 技术社区 › Brian Ramsay

什么会使offsetparent为空?

positioning html javascript

Brian Ramsay · 技术社区 · 16 年前

我正在尝试在javascript中进行定位。我使用的是基于 classic quirksmode function 和 offsetTop 和 offsetLeft 对于每一个 offsetParent 直到顶部节点。

但是,我遇到了一个问题,我感兴趣的元素没有 抚养父母 在Firefox中。在伊江 抚养父母 存在,但 偏心顶 和 左偏左 所有这些加起来都是0,所以它和火狐有同样的问题。

什么会导致屏幕上清晰可见和可用的元素没有 抚养父母 ?或者,更实际地说,我如何找到这个元素的位置,以便在它下面放置一个下拉列表?

编辑 :下面介绍如何复制此问题的一个特定实例(当前接受的答案无法解决):

打开 home page of Stack Overflow .

在Web浏览器的控制台中运行以下代码(例如chromev21):

var e = document.querySelector('div');
console.log(e);
// <div id="notify-container"></div>
do{
  var s = getComputedStyle(e);
  console.log(e.tagName,s.display,s.visibility,s.position,e.offsetParent);
} while(e=e.parentElement)
// DIV block visible fixed null
// BODY block visible static null
// HTML block visible static null

为什么是 抚养父母 那个元素 null ?

6 回复 | 直到 13 年前

Greg 16 年前

如果文档尚未完成加载,则offsetparent可以为空。

Phrogz 13 年前

我已经做了 a test of 2,304 divs 具有唯一的值组合 position , display 和 visibility ,嵌套在这些值的唯一组合中,并确定:

其他有效元素
那是的后代 <body>
不会有一个 offsetParent 值如果:

元素有 position:fixed ( WebKIT和IE9 )
元素有 display:none ( WebKIT与FF )
任何祖先都有 显示:无 ( WebKIT与FF )

也可以合理地期望没有父元素或未添加到页面本身的元素(不是 <身体& 页),也将有 offsetParent==null .

Ivan 14 年前

https://developer.mozilla.org/en/DOM/element.offsetParent

当元素的style.display设置为“none”时,offsetparent返回空值。

David Rivers CDMP 13 年前

offsetParent 如果元素对象尚未附加到DOM,则返回空。

kapa 13 年前

这是一个古老的问题,但我有另一个例子。如果您操作DOM,可能会得到一个空的offsetparent——在IE6和IE7中。

见: IE 6/7 - "Unspecified Error" when accessing offsetParent (Javascript)

Norman 15 年前

当元素左侧的兄弟姐妹隐藏时,我遇到了这个问题:

<div id="parent">
  <div id="element1">some stuff</div>
  <div id="element2" style="display: none">some hidden stuff</div>
  <div id="element3">child whose offset we want</div>
</div>

我碰到了一个案子, 抚养父母 属于 元素3 即使是空的 元素3 本身是可见的,并且起源是可见的。

我见过Thin是火狐3.6和Chrome5。它似乎也影响 getboundingclientrect()。 功能上 元素3 这真的很烦人,因为这在很多其他情况下都有效!