HTML - 为什么 z-index 不起作用？

Question

我已经尝试了几个小时，这让我很紧张。我正在使用 bootstrap 和 spin.js 库。我试图在 img 标签上放置一个颜色层，但这根本行不通。

我正在处理的代码是 this

CSS代码

        .container-fluid {
            position: relative;
            padding: 0;
            margin: 0;
        }
        .header{
            position: relative;
            max-height: 920px;
            height: 100%;
        }
        .header_layer{
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100px;
            background-color: darkgrey;
            z-index: 100;
        }
        .img_header{
            position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            z-index: 99;
        }

HTML代码:

<div class="container-fluid">
    <div class="header col-md-12">
        <div class="header_layer"></div>
        <img src="http://placehold.it/350x150" class="img-responsive img_header">          
    </div>
</div>

但是，非常感谢。

Answer 1

当你给 position:relative 和 top/left : 0 所以元素不重叠我猜你需要 position:absolute