Why is the floated element overlapping the element below and not the other way round?

Answer 1

From MDN's Stacking and float

For floating blocks the stacking order is a bit different. Floating blocks are placed between non-positioned blocks and positioned blocks

And it goes on further to say

If the opacity of the non-positioned block (#p2 in your example) is reduced, then something strange happens: the background and border of that block pops up above the floating blocks, but still under positioned blocks.