23

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
  • 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.
    – TylerH
    Aug 20, 2017 at 17:18
  • Yes, that's what it means.
    – philraj
    Aug 20, 2017 at 17:20

2 Answers 2

23

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.

2
  • 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?
    – RMT
    Sep 27, 2018 at 9:19
  • 1
    @ReidunMarie, "closest ancestor" only means ancestor (parent). Not sibling, nor child. See closest() defined in HTML specification.
    – tao
    Sep 27, 2018 at 10:04
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
  • @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.
    – Rob
    Aug 20, 2017 at 17:50
  • 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.
    – tao
    Aug 20, 2017 at 18:39

Your Answer

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

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