div设置背景色层级超过包含的img

正常的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的设置背景色层级超过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>

效果如下图:

image.png

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容