Why do we have to provide relative position to the container
.container{
position : relative;
}
whereas we can provide absolute positioning to the child elements.
It’s just a rule in CSS. And old one from 1997.
From the docs at MDN:
If the position property is absolute, the containing block is formed by the edge of the
padding box of the nearest ancestor element that has a position value other than static
(fixed, absolute, relative, or sticky).
The default value for position is static. This means that if you don’t set position: relative (or any of the other values other than static), it will look to the next parent element to see if it contains this property. This can go all the way up the hierarchy tree to the outer most element, the HTML element.