Correct offsetParent condition

[Josh-Cena]

Fix https://github.com/mdn/content/issues/28991. offsetParent includes non-static positioning, but also other things. Luckily we already have a good article on containing blocks.

[github-actions[bot]]

Preview URLs

• /en-US/docs/Web/API/HTMLElement/offsetParent

[gmanrique-cb]

Hi everyone, I'm not sure if this is the right place to make this comment, so please point me to the right one if that's the case.

I've something like the following structure (very simplified):

<div style="position: relative" id="theParent">
  <div id="theChild"></div>
</div>

While trying to understand why the offsetParent for theChild is theParent, I was reading the latest version of the article (at the moment if making this comment) which has the changes made on this PR.

This was my reasoning when reading the bullet points for what a positioned ancestor might be:

• I read the first bullet point:

  a containing block for absolutely-positioned elements

  My element is not absolutely positioned, so this doesn't explain it

• I read the second bullet point:

  an element with a different effective zoom value...

  I'm not using zoom or transform: scale(), so this one doesn't explain it either

• I read the last bullet point:

  td, th, table in case the element itself is static positioned.

  I'm not working with tables so this isn't it either

"an element with a non-static position" would have definitely explained it in on my case.

Is this something I'm not understanding correctly or is this a "bug" in the docs after the changes in this PR?

Thanks!

[Josh-Cena]

Hi @gmanrique-cb! The first bullet says "a containing block for absolutely-positioned elements". It doesn't say "an absolutely-positioned element". What this means is that "an element that will cause absolutely-positioned elements within it to be relative to this element". If you go to that link for containing block, you would see what the conditions are, namely the following two bullets:

2. If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

4. If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has any of the following: [...]

[gmanrique-cb]

I see, that makes sense now. Thanks for the explanation!