Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I quickly find the relatively positioned HTML parent element of an absolutely positioned child?

I am working with the following code:

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

like image 394
Blake Frederick Avatar asked Mar 23 '15 19:03

Blake Frederick


1 Answers

HTMLElement.offsetParent is just designed to do this.

See this document on MDN.

like image 75
Justineo Avatar answered Oct 30 '22 10:10

Justineo