18

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.

2 Answers 2

16

HTMLElement.offsetParent is just designed to do this.

See this document on MDN.

0
3

To add to Justineo's answer, if you want to do this in Chrome Devtools:

Right-click the element in the "Elements" section of the devtools and select "Store as global variable":

enter image description here

It should store a JavaScript variable reference to the element as "temp1":

enter image description here

Then just run temp1.offsetParent in the console to see the parent:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.