正常的position:relative和z-index配置

<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .navs{
        width: 300px;
        height: 300px;
        margin: 100px 200px;
        overflow: hidden;
    }
    .nav{
        width: 100%;
        background: rgba(0,0,0,0.8);
        position: relative;
        z-index: 100;
    }
    .nav img{
        position: relative;
        z-index: -1;
        width: 100%;
    }
</style>

<div class="navs">
    <div class="nav">
        <img src="img/game5.png" >
    </div>
</div>

效果如下：

image.png

這樣的效果并沒有使div的設(shè)置背景色層級(jí)超過img，div設(shè)置position:relative和z-index的值，里面包裹的圖片也設(shè)置position:relative和z-index的值。這樣并不能使div的背景色層級(jí)超過圖片

下面是正確的示例

<style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    .navs{
        width: 300px;
        height: 300px;
        margin: 100px 200px;
        overflow: hidden;
    }
    .nav{
        width: 100%;
        background: rgba(0,0,0,0.8);
        position: relative;
        /* z-index: 100; */
    }
    .nav img{
        position: relative;
        z-index: -1;
        width: 100%;
    }
</style>

<div class="navs">
    <div class="nav">
        <img src="img/game5.png" >
    </div>
</div>

效果如下圖：

image.png

我們這里只做了一個(gè)操作，那就是給父級(jí)div不設(shè)置z-index屬性

圖片的z-index值一定要是負(fù)數(shù)

具體什么原因我查了查，沒太看明白，應(yīng)該是盒子模型層級(jí)的覆蓋問題。

如果你有幸看到這篇文章，而你又知道什么原因，請(qǐng)回復(fù)我其中的原理