If the child is position:absolute and the parent is overflow:hidden, why does the child overflow?

Question

If the child is position:absolute, the parent is overflow:hidden, and the parent is position:static, the child still overflows:

<

Answer 1

That's because the spec defines overflow as

This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

The absolutely positioned element is a descendant whose containing block is established by an ancestor of the element with overflow: hidden, as explained in Definition of "containing block"

If the element has position: absolute, the containing block is established by the nearest ancestor with a position of absolute, relative or fixed

Therefore the absolutely positioned element is not affected by that overflow: hidden.

If the parent were positioned, it would be the containing block of the absolutely positioned element, and then overflow: hidden would affect it.