两个 div 具有相同的 parentNode 但不同的 offsetParent答案

【问题标题】：two divs have same parentNode but different offsetParent两个 div 具有相同的 parentNode 但不同的 offsetParent
【发布时间】：2016-07-29 06:15:36
【问题描述】：

我用两个具有相同parentNode 的元素调用此函数：

var test = function(target, div){
     alert(div.parentNode == target.parentNode );    // gives true
     alert(div.offsetParent == target.offsetParent); // gives true
     div.setAttribute("style", "position:relative; float:left; height:" + target.offsetHeight + "px;");
     alert(div.parentNode == target.parentNode);     // gives true
     alert(div.offsetParent == target.offsetParent); // gives false!!!
}

如你所见，两个元素都有相同的父元素，这意味着它们在 DOM 树的同一个分支中，为什么它们有不同的offsetParent？

我注意到这里 div 具有相对位置，这似乎是原因，因为当我删除它时，两个警报都为真。（但通常元素的位置不应影响其offsetParent）

/* 我在经过更多调查后编辑了该函数，它应该更多地显示问题出在哪里 */ 我在 FF 和 Chrome 上得到了相同的结果。两个元素的 parentNode 都是 table-td

感谢您的回答。

【问题讨论】：

“我看到这里的投票者比实际回复者更多” - 因为有许多低质量的问题没有提供足够的信息来实际产生答案。或者提问者甚至没有尝试用谷歌搜索他们的问题。
请注意，.offsetParent 和 .parentNode 不必给出相同的值。因为他们根据文档的结构获得不同的项目。
第二个如果你花时间专注于这个问题，你会看到两个元素都有相同的 parentNode（无论文档结构是什么），所以它们属于 div 的同一个分支，并且在那个分支祖先中有些有一个定位元素将是 offsetParent（两个 div 的我应该是相同的）
第三，可能有低质量的答案，但没有低质量的问题......一个问题假设我们不知道某事并且我们询问它。说一个问题质量低是没有意义的（正如一位好老师告诉我们的那样，一旦没有愚蠢的（这里你称之为低质量）问题..
@fekirimalek — 您将“愚蠢”与“低质量”混为一谈，并将科林鲍威尔的名言视为普遍真理，而不是在使用它的上下文中加以考虑。

标签： javascript html css

【解决方案1】：

仅仅因为两个属性都包含“父”这个词并不意味着它们很相似。

offsetParent 属性返回祖先层次结构中最接近的元素定位。
parentNode 属性只返回直接父元素。

现在，如果两个元素是兄弟姐妹（如您的示例中），那么它们的偏移父级应该相同。但是，元素可以返回null 而不是偏移父元素，例如：

当元素为display: none时
当元素为position: fixed时

编辑：您的示例涉及td 元素，因此偏移父级为calculated in a weird manner。在td 元素内：

非定位元素会将td 元素作为其偏移父元素。这意味着 target.offsetParent 将是 td。
对于定位元素，适用常规规则。这意味着 div.offsetParent 将是 body，因为 div 已定位。

使两个元素具有相同偏移父级的最简单解决方法是在表格单元格上添加position: relative。

【讨论】：

谢谢，但这两种情况都不适用于这里...我更改了一些功能以显示问题
这已经变成了一个 CSS 问题。请参阅修改后的答案。
谢谢 Salman A，这解释了这个问题。奇怪的是 td 很奇怪，我不明白为什么标准如此......但无论如何现在我知道我可以找到解决方法。

【解决方案2】：

offsetParent 是最近的具有位置的父级，因此当 div 本身具有位置时，它就是它自己的 offsetParent。

【讨论】：

谢谢我也怀疑过，但它不是 (div == div.offsetParent) 返回 false。并且萤火虫显示 div.offsetParent 在我的 DOM 中是一些更高的 div。