`position:absolute` not being positioned wrt to first ancestor element and not following any observable pattern either

Here is what Mozilla developers says about position absolute:

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.

position: absolute also reinitialises the position of its children like position: relative does.

In your case, TipsHeadingis positioned based on its closest positioned ancestor .Tips, whereas #WearMask is positioned based on the position of its ancestor .rec2

That being said, giving all your elements an absolute positioning will create a lot of mess in your css. Try to work with relative elements while using flex,margin and padding instead.

The element in position: absolute is positioned relative to its first positioned ancestor element.