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

【问题标题】：How can I quickly find the relatively positioned HTML parent element of an absolutely positioned child?如何快速找到绝对定位子元素的相对定位 HTML 父元素？
【发布时间】：2015-05-26 22:04:51
【问题描述】：

我正在使用以下代码：

<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 sn-p 将是一个合适的解决方案示例。

【问题讨论】：

标签： javascript html css position google-chrome-devtools

【解决方案1】：

HTMLElement.offsetParent 就是为此而设计的。

见this document on MDN。

【讨论】：