Why does the absolute positioning (position:absolute) cannot be placed inside a static parent container?

Question

I understand that the way CSS works, the element with absolute positioning finds the closest parent container that is not static. I just want to know why this is the case? Why are absolute-positioned elements not allowed to go inside a static parent container?

Answer 1

HTML elements are positioned static by default and static positioned elements are not affected by the top, bottom, left, and right properties so an element with position: static is not positioned in any special way; it is always positioned according to the normal flow of the page.

An absolute positioned element will position itself relative to the nearest positioned ancestor and the reason why it can't be relative to a static element parent is because otherwise absolute wouldn't be able to position with respect to anything other than the element's immediate parent and it will have to apply calculations on every element instead of being able to take just shorter paths for static positioning elements.

The use of static positioned elements allows you to have arbitrary elements containers and this let's you have an element to be positionable relative to the element container you wish and not necessarily the intermediate parent.