Question

我正在尝试在JavaScript中进行定位。我正在使用基于classic quirksmode function的累积排名函数，该home page of Stack Overflow为每个offsetTop加上offsetLeft和offsetParent，直到顶部节点。

但是，我遇到了一个问题，我感兴趣的元素在Firefox中没有offsetParent。在IE offsetParent中存在，但offsetTop和offsetLeft总计为0，因此它与Firefox中的效果相同。

什么会导致屏幕上清晰可见且可用的元素没有offsetParent？或者，更实际的是，我如何才能找到该元素的位置以便在其下方放置一个下拉？

编辑：以下是如何重现此特定实例（未通过当前接受的答案解决）：

打开{{3}}。

在网络浏览器的控制台中运行以下代码（例如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

为什么该元素的offsetParent null？

Answer 1

我使用position，display和visibility的唯一值组合a test of 2,304 divs，嵌套在每个值的唯一组合中，并确定：

其他有效的元素
这是<body>的后代如果符合以下条件，则不会显示offsetParent值：

该元素具有position:fixed（ Webkit和IE9 ）
该元素包含display:none（ Webkit和FF ）
任何祖先都有display:none（ Webkit和FF ）

期望没有父元素或者没有添加到页面本身的元素（不是页面的<body>的后代）的元素也会{ {1}}。

Answer 2

如果文档尚未完成加载，则offsetParent可以为null

Answer 3

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

当元素的style.display设置为“none”时，offsetParent返回null。

Answer 4

这是一个老问题，但我有另一个案例。如果你操纵DOM，你最终可能会得到一个null offsetParent - 在IE6和IE7中。

请参阅：IE 6/7 - "Unspecified Error" when accessing offsetParent (Javascript)

Answer 5

如果您的元素对象尚未附加到DOM，

offsetParent将返回null。

Answer 6

当隐藏元素左侧的兄弟时，我遇到了这个问题：

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

我遇到 element3 的 offsetParent 为空的情况，即使 element3 本身可见， parent 可见。

我看到瘦是Firefox 3.6和Chrome 5.它似乎也会影响 element3 上的 getBoundingClientRect（）功能，这真的很烦人，因为它有效在很多其他情况下！

Answer 7

当父级位于Web组件内时，我也经历了offsetParent的{{1}}（即，我尝试将null的元素投影到Web组件中）。

什么会使offsetParent null？

7 个答案: