z-index ignored by browser when not inline (And again ignored when inline and not inline have the exact same style)

Question

Note: I\'m using vue/vuetify but the main question i\'m having is why does the browser interpret it this way? And knowledge of vue/vuetify is not necessary for this