0

W3Schools describes the position property's absolute value as:

absolute: The element is positioned relative to its first positioned (not static) ancestor 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?

Joel Castro
  • 485
  • 6
  • 20
  • Does this answer your question? [What is a positioned ancestor?](https://stackoverflow.com/questions/45784777/what-is-a-positioned-ancestor) – Maximilian Ballard Nov 17 '22 at 07:30
  • @MaximilianBallard That doesn't address what happens if there are no positioned ancestors like in this case. – Donald Duck Nov 17 '22 at 12:11
  • @DonaldDuck I don't know whether or not there are any positioned ancestors and I also don't know what qualifies as an acestor. That is why I just asked this question this way. Simple, no assumptions. The author of the answer I selected understood this. He detailed who the ancestors are and what their default position properties are, which helped me understand why the answer is what it is. – Joel Castro Nov 17 '22 at 17:16
  • Then the duplicate that Maximilian Ballard suggested also applies. @TylerH, could you add that to the duplicate list? – Donald Duck Nov 17 '22 at 19:29

1 Answers1

3

The ancestors of the p element are, in order:

  1. (First) body (the parent)
  2. 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).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335