So I have been following this tutorial, to get a more clear understanding of relative and absolute positioning . Most of the things are clear but towards the end of the article it says
about absolute positioning .
..it doesn’t always default to the top left of the browser window.
Instead, what position: absolute; really does is position the element
relative to its first non-statically-positioned ancestor (inherit
doesn’t count either)...
not statically positioned element is an element having
position property set to anything other than
static (which is the default value).
position: relative || absolute || fixed
If no such positioned ancestor is found, the
absolute positioned element will be positioned relative to the window.