markdown 快速找到绝对元素的相对定位的祖先

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown 快速找到绝对元素的相对定位的祖先相关的知识,希望对你有一定的参考价值。

### Original Question:
[How can I quickly find the relatively positioned HTML parent element of an absolutely positioned child?](https://stackoverflow.com/questions/29218330/how-can-i-quickly-find-the-relatively-positioned-html-parent-element-of-an-absol?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)

I am working with the following code:
```markup
<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        ...
                            <div class="absolute">Lorem ispum</div>
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.absolute {
  position: absolute;
}
```

Using Chrome's DevTools, I'd like to be able to quickly find which parent div element has position: relative, so I can know which parent element is determining the origin point of my absolutely positioned element. I can manually inspect each of the divs to find the first parent that is set to relative but I'm working with a deeply nested tree, so I'm wondering if there is a faster way to find the parent I'm trying to find. A Javascript snippet for the console would be an example of a suitable solution.

---
### How To:

1.  Open the inspector and select the element. In the console, it's now defined as $0.
2.  Switch to console view and type or paste `$0.offsetParent;`

---

[HTMLElement.offsetParent](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent)

以上是关于markdown 快速找到绝对元素的相对定位的祖先的主要内容,如果未能解决你的问题,请参考以下文章

css中的相对定位与绝对定位的区别

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

77-绝对定位-参考点

HTML定位——绝对定位和相对定位固定定位

解析什么是绝对定位,相对定位与浮动

css position 定位详解