What Is a Positioned Ancestor

What is a positioned ancestor?

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:

In case there are more than one positioned ancestors we mean the closest.
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.

Using position:absolute, the nearest positioned ancestor is having no effect

Two general rules to keep in mind:

An absolutely positioned element will be positioned within its containing block, which is defined by the nearest positioned ancestor. However, if there is no positioned ancestor, the containing block is the initial containing block (i.e., the viewport).
Your .parent div is pretty much aligned at the top-left corner of the viewport. That's why your absolutely positioned child will have similar positioning in either containing block.
When you apply position: absolute to an element you remove it from the normal flow. That's it. The element will still be positioned as though it were in the normal flow. It isn't until you apply the CSS offset properties (left, right, top, bottom) that you actually position the element.

What is the first positioned ancestor of an element in the body

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

This absolute positioned element is not positioned next to it's nearest ancestor and instead attached to the document body and I'm wondering why

The part you're missing is this:

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

The words_info element has ancestors, but it doesn't have any positioned ancestors (elements with position: relative, position: absolute, or position: fixed). So it's defaulting to this:

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

CSS absolute positioning, what is non-statically positioned ancestor?

not statically positioned element is an element having position property set to anything other than static (which is the default value).

For e.g: position: relative || absolute || fixed

If no such positioned ancestor is found, the absolute positioned element will be positioned relative to the window.

Possible to bypass then nearest positioned ancestor?

You'll have to calculate the difference between its natural position and the desired position to place it absolutely in the window.

If you're using jQuery, you can let it do the math for you via the .offset(coordinates) function.

What Is a Positioned Ancestor