z-index is not working when using padding and background-color set

Question

Can someone please explain why red div is on top of the blue div, when it should be the other way around, because of z-index.

N