::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

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;
  }