Html z索引问题-div未覆盖另一个

所以我有一个问题，尽管花了一段时间在研究上，但我仍然无法找出我做错了什么

考虑以下几点：

/* Main row */
.main-row {
    width: 100%;
    display: inline-flex;
    z-index: -1;
    position: relative;
}

.spacer { 
    width: 100%;
    background-color: #0a0826;
    height: 250px;
    background-image: url("../img/purple-wave.png");
    background-position: 0px 17%;
    z-index: 10;
    position: relative;
}

和HTML

<div class="main-row">
    <div class="main-row left-pane">
        <h1 class="main-row title">Changing The Way</h1>
        <p class="main-row subtitle">We understand <a>intelligent</a>telecommunication</p>
    </div>
    <div class="main-row right-pane">
        <img src="<?php echo base_url("assets/vid/ai_brain.gif");?>" />
    </div>
</div>


<div class="spacer"></div>

改道
我们理解
" />

---

我希望看到间隔器（带有一些奇特的图形）覆盖主行，但这不会发生。指定了位置，z索引设置正确，两个div相互独立。无论我做什么，图形仍然显示在

主行下方
div
我认为您混淆了
背景位置
和元素定位。背景定位将
背景的位置设置为相对于元素在屏幕上的位置。背景仍包含在元素中，否则不会影响元素在屏幕上的大小或位置

如果调整垫片的实际位置，所有内容都将重叠，如下所示：

.spacer { 
    top: -200px; /* This */
    width: 100%;
    background-color: #0a0826;
    height: 250px;
    background-image: url("../img/purple-wave.png");
    background-position: 0px 17%;
    z-index: 10;
    position: relative;
}

下面和后面是两个不同的概念。代码中没有任何东西使两个元素重叠，因此z索引在这里是无关的