Friday, March 29, 2024
HomeCSSDiscovering an Aspect’s Nearest Relative Positioned Ancestor

Discovering an Aspect’s Nearest Relative Positioned Ancestor


This text was up to date on 15 March 2021.

Have you ever ever been confronted with a CSS positioning dilemma the place a component with place: absolute isn’t being positioned as you’d count on? Setting absolute positioning on a component will place it in relation to its nearest ancestor that has its place set to one thing apart from static (the default).

Two examples showing position of a purple element when the parent has relative positioning versus when another ancestor has it

Within the above picture, the absolute-positioned factor is positioned with the identical CSS in each examples:

.absolute {
place: absolute;
prime: 100%;
left: 0;
}

However it leads to a distinct place in every instance. It’s because within the first instance its mother or father (the pink factor) has place: relative, whereas within the second it’s one other ancestor that has relative positioning (the gray factor).

See the Pen
Relative and absolute positioning
by Michelle Barker (@michellebarker)
on CodePen.

It’s price noting that if no ancestor is positioned, a component with place: absolute might be positioned in relation to the <physique>.

In a comparatively easy instance like this one, a fast examination of the CSS makes it simple to find out which ancestor has relative positioning, and we will modify our types accordingly in the event that they’re not having the specified impact. However typically, in additional advanced codebases (particularly with lots of nested components), discovering which ancestor of a component has relative positioning could be a little trickier. This mostly occurs to me when constructing advanced headers with full-width dropdown submenus: I typically must place them in relation to the complete header, however someplace I’ve inadvertently set place: relative on another factor, which breaks the specified behaviour.

Trawling via all that code may be time-consuming, however fortunately there may be a better solution to discover the closest positioned mother or father in Javascript — which we will do proper within the browser console.

In Chrome and Firefox, if we open the Console tab within the developer instruments, we will get the presently chosen factor by typing $0. Then we will use the offsetParent object property to search out the closest ancestor to that factor that has its place set to one thing apart from static. Strive choosing a component and typing this into the console:

$0.offsetParent

This received’t truly inform us the place worth (whether or not it’s relative, fastened or one thing else). However we will use getComputedStyle to search out out the worth of the factor’s place property:

getComputedStyle($0.offsetParent).place

By typing $_ into the console we will retrieve probably the most not too long ago evaluated expression as a variable, which may make this faster too:

$0.offsetParent

exhibits us the factor. Then:

getComputedStyle($_).place

retrieves its place worth.

There are a few caveats: offsetParent will return null if the factor has its postion set to fastened or itself or its mother or father has show: none. (See MDN docs for particulars.)

In my expertise place: relative is mostly used for offsetting a descendent (as within the instance I’ve used), however it’s price making an allowance for that fastened or sticky values can even allow the behaviour — however maybe these components are just a little simpler to identify within the browser!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments