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