如何快速找到绝对定位子元素的相对定位HTML父元素？

Question

我正在使用以下代码：

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        ...
                            <div class="absolute">Lorem ispum</div>
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.absolute {
  position: absolute;
}

使用 Chrome 的 DevTools，我希望能够快速找到哪个父

<div>

元素具有

position: relative

，这样我就可以知道哪个父元素正在确定我的绝对定位元素的原点。我可以手动检查每个 div 以查找设置为

relative

的第一个父级，但我正在使用深度嵌套的树，所以我想知道是否有更快的方法来找到我正在尝试的父级去寻找。控制台的 Javascript 片段就是合适解决方案的示例。

Answer 1

HTMLElement.offsetParent

就是为了做到这一点而设计的。

请参阅 MDN 上的此文档。

Answer 2

如果您想在 Chrome Devtools 中执行此操作，请添加 Justineo 的答案：

右键单击该元素并选择“存储为全局变量”：

它应该将元素的 JavaScript 变量引用存储为“temp1”：

然后只需在控制台中运行

temp1.offsetParent

即可查看父级：