什么会使 offsetParent 为空？

发布于 2024-07-09 08:48:19 字数 1194 浏览 5 评论 0原文

我正在尝试用 JavaScript 进行定位。我正在使用基于经典 quirksmode 函数的累积位置函数计算每个 offsetParent 的 offsetTop 和 offsetLeft 的总和，直到顶部节点。

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

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

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

打开 Stack Overflow 的主页。

在网络浏览器（例如Chromev21）的控制台中运行以下代码：

var e = document.querySelector('div'); 
  控制台.log(e); 
  // ; 
  做{ 
    var s = getComputedStyle(e); 
    console.log(e.tagName,s.display,s.visibility,s.position,e.offsetParent); 
  while(e=e.parentElement) 
  // DIV块可见固定null 
  // BODY 块可见 static null 
  // HTML 块可见 static null

为什么该元素的 offsetParent 为 null？

原文

I am trying to do positioning in JavaScript. I am using a cumulative position function based on the classic quirksmode function that sums offsetTop and offsetLeft for each offsetParent until the top node.

However, I am running into an issue where the element I'm interested in has no offsetParent in Firefox. In IE offsetParent exists, but offsetTop and offsetLeft all sum up to 0, so it has the same problem in effect as in Firefox.

What would cause an element that is clearly visible and usable on the screen to not have an offsetParent? Or, more practically, how can I find the position of this element in order to place a drop-down beneath it?

Edit: Here's how to reproduce one particular instance of this (not solved by the currently-accepted answer):

Open the home page of Stack Overflow.

Run the following code in the Console of the web browser (e.g. 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

Why is the offsetParent of that element null?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烏雲後面有陽光 2024-07-16 08:48:19

我已经对 2,304 个 div 进行了测试，并使用 position、display 的值的独特组合 和 可见性，嵌套在每个值的唯一组合内，并确定：

一个否则有效的元素
这是
的后代
如果满足以下条件，则不会有 offsetParent 值：

元素具有 position:fixed（Webkit 和 IE9）
元素具有 display:none< /code>（Webkit 和 FF）
任何祖先都有 display:none（Webkit 和 FF）

也可以合理地预期没有父元素或未添加到页面本身的元素（不是页面的后代）也将具有 offsetParent==null< /代码>.

回复收藏 0 原文

北凤男飞 2024-07-16 08:48:19

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

回复收藏 0 原文

素手挽清风 2024-07-16 08:48:19

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

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

回复收藏 0 原文

胡渣熟男 2024-07-16 08:48:19

如果您的元素对象尚未附加到 DOM，则 offsetParent 将返回 null。

回复收藏 0 原文

挽心 2024-07-16 08:48:19

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

请参阅： IE 6/7 - 访问 offsetParent (Javascript) 时出现“未指定错误”

回复收藏 0 原文

空‖城人不在 2024-07-16 08:48:19

当元素左侧的同级元素被隐藏时，我遇到了这个问题：

<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 为 null 的情况，即使 < strong>element3 本身可见，parent 可见。

我见过 Firefox 3.6 和 Chrome 5。它似乎也会影响 element3 上的 getBoundingClientRect() 函数，这真的很烦人，因为它适用于这么多其他情况！

I have run into this problem when the sibling just to the left of the element is hidden:

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

I've run into the case where the offsetParent of element3 is null even though element3 itself is visible, and parent is visible.

I've seen thin is Firefox 3.6 and Chrome 5. It seems to also affect the getBoundingClientRect() function on the element3, which is really annoying since that works in so many other cases!

回复收藏 0 原文