It’s to keep the arrow placement “connected” to the main bubble parent. Remove it and the arrow will be positioned relative to the document body, or to the closest ancestor element with relative positioning.
elements that are positioned (absolute) is positioned relative to the nearest positioned ancestor
No – they’re position relative to the document body, unless a parent has a position of relative, then the absolutely positioned element is positioned relative to that. Please read the article linked for more info.
So what if I rap the box with a new div so that the pseudo-element is positioned absolutely to box without needing the position relative!
I wouldn’t work without the relative positioning. If you don’t put relative positioning on the/a parent (immediate or extra wrapper, or something else higher up the DOM) the arrow will be positioned relative to the body element.