Html 获取背景图像以在两个图像之间重叠另一个背景图像<；部门>；元素

我有以下HTML（Bootstrap）（实际上已经崩溃了，不过应该足够了）：

我在每个“容器流体”元素上使用背景图像

现在我需要第一个背景图像与第二个“容器流体”重叠

但是，当我在两个页面上都使用负边距时，例如（边距顶部：-50px或边距底部：-50px-似乎第二个页面总是与第一个页面重叠

我尝试了z-index，它对背景图像不起作用。 我不能将第二个背景图像作为实际图像包含，因为我想向该元素添加内容

使用负边距时，如何使第一个div与第二个div重叠

---

非常感谢您的帮助，谢谢！

只需使用静态以外的位置，并通过

z-index

控制它们即可：

。容器流体{
位置：相对位置；
最小高度：50px；
}
#英雄{
背景：url（'https://via.placeholder.com/350x150/ff0000")不重复;；
背景尺寸：封面；
z指数：10；
顶部：20px；
}
#聚光灯{
背景：url（'https://via.placeholder.com/250x250/00ff00")不重复;；
背景尺寸：封面；
}

<div class="container-fluid" id="hero">
    <div class="container container-padding">
        <div class="row">
            <div class="col" align="center">

            </div>
        </div>
   </div>
</div>
<div class="container-fluid" id="spotlight">
    <div class="container container-padding">
        <div class="row">
            <div class="col" align="center">
                <img src="img/spotlight.png" />
            </div>
        </div>
    </div>
</div>