What is the first positioned ancestor of an element if none of its parents have a non-static positio-CodePudding

W3Schools describes the position property's absolute value as:

absolute: The element is positioned relative to its first positioned (not static) ancsestor element

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?

CodePudding user response：

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