正常的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>

效果如下：

这样的效果并没有使div的设置背景色层级超过img，div设置position:relative和z-index的值，里面包裹的图片也设置position:relative和z-index的值。这样并不能使div的背景色层级超过图片

下面是正确的示例

<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>

效果如下图：

我们这里只做了一个操作，那就是给父级div不设置z-index属性

图片的z-index值一定要是负数

具体什么原因我查了查，没太看明白，应该是盒子模型层级的覆盖问题。

如果你有幸看到这篇文章，而你又知道什么原因，请回复我其中的原理