What is the first positioned ancestor of a body element?

November 17, 2022

W3Schools describes the position property’s absolute value as:

So, if I have this setup:

<!DOCTYPE html>
<html>
  <body>
    <p style="position:absolute;">p tag</p>
  </body>
</html>

What would be the "first positioned ancestor element" of the p tag?

>Solution :

The ancestors of the p element are, in order:

(First) body (the parent)
html (the grandparent)

The first positioned one is the first of those where the CSS position property is set to a value other than static (which is the default).

Lacking any CSS (as in your case), there aren’t any positioned ancestors.

W3Schools is (in many many ways) awful, and in this particular case is fails to tell you what MDN doesn’t miss out:

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

and

Note: The containing block in which the root element (<html>) resides is a rectangle called the initial containing block. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).