::before and ::after position absolute acting like position fixed

Question

So I am trying to position my pseudo element with position absolute, but instead, it is acting like its parent is something else.

Answer 1

Absolute positioned elements need to be contained by a relative parent.

See example from w3c, play with it by removing the position: relative from parent element. Run it and you'll see how it gets messed up.

This example comes from the main position article by w3cschools.

Adding

p { 
  position: relative;
}

should fix the issue.