Why is overflow interacting with z-index?

Question

I am trying to understand the rules behind z-index and how it interacts with the overflow property.

I have this html:

Answer 1

Your problem

Your problem is related to cell node that hides boxy when overflow is specified on cell node.

The reason

The reason behind is that boxy with position absolute does not contribute to height of cell and overflow hides it.

Why is it shown without overflow?

By default overflow is visible, which for browser means do not do anything special for overflow functionality and it does not need to render overflow => does not hide boxy.