::before And ::after Position Absolute Acting Like Position Fixed

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

Solution 1:

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport

w3schools example here

My Example here

  p{
       position:relative;
  }

Solution 2:

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.