I am reading the “Positioning Techniques” of this article on MDN.
It talks about “Absolute positioning elements can be fixed to a position relative to its nearest positioned ancestor element”.
My understanding of “positioned ancestor” is an ancestor with any position property other than static. But I need expert opinions to verify my thought.
2
When referring to positioned ancestor we mean the closest ancestor to the element with a set position value, other than static (which is default).
So there are two assumptions here:
- In case there are more than one positioned ancestors we mean the closest.
- In case there is an ancestor with a set
position:static(presumably set by JavaScript, in order to change the “positioned ancestor”) we don’t mean that ancestor.
Why is this important? Because the “positioned ancestor” is the reference from which properties like left and top are calculated, when the descendant is given position:absolute. It’s also called “the reference element/parent” of the descendant.
Also, if this closest ancestor has a set z-index (other than auto), it creates a stacking context for its descendants.
2
From the W3C:
In this case the containing block is the nearest positioned ancestor.
By “positioned” I mean an element whose position property is set to
relative, absolute or fixed—in other words, anything except normal
static elements.
Long description for example illustrating positioning with respect to a positioned ancestor
a containing block established by a relatively positioned ancestor
(“outer”).
And CSS Module 3, search for “positioned ancestor” on that page.
2