One question about background overlay

Question

<div>
    <div>
         <div></div>
    </div>
</div>

It seems to me that the inner background will overwrite the outer one,why is it designed like this?

Answer 1

The backgrounds will nest... Think of pieces of paper..., when you stack them, the first and largest is shown, if the size of the first is made smaller than the ones behind it, the ones behind it take up the space. Transparency works with this same principle.

Answer 2

using the z-index property may give you more control over how elements overlap; however, it is only recommended as a last option if you are using an absolute-positioned layout. otherwise, stick with native HTML semantics and look up best practices on positioning elements.