What is a positioned ancestor?

Question

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.

Fidelis

I'm sure this is a dupe, so until I find the appropriate target, I'll say here: your understanding is correct. Not sure what wiggle room there is for another interpretation to begin with. – Indispose

Yes, that's what it means. – Bermejo

Answer 1

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:

1. In case there are more than one positioned ancestors we mean the closest.
2. 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.

Maggoty

What do you mean by the closest? Can this be parent or sibling? If it can be both, which is closest of the two of them? – Barram

@ReidunMarie, "closest ancestor" only means ancestor (parent). Not sibling, nor child. See closest() defined in HTML specification. – Maggoty

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

Injustice

@AndreiGheorghiu So you are saying Tim Berners-Lee is wrong? I'm sure you are thinking I linked to W3Schools but I did not. The links are to the CSS specs an articles from the W3C. In any case, your statement has not been true about W3Schools either for a number of years. – Injustice

You are correct, my previous comment was based on the wrong impression you linked W3Schools. I apologize and I assure you I meant to help. – Maggoty