z-index问题-div不覆盖另一个

Question

所以我有一个问题，尽管花了一些时间在研究上，但现在我仍然无法弄清楚自己在做什么错。

请考虑以下内容：

/* 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彼此独立。无论我做什么，图形仍然显示在main-row div

下

Answer 1

我认为您混淆了background-position和元素的位置。背景定位会更改background相对于元素在屏幕上的位置的位置。背景仍然包含在元素中，否则不会影响元素的大小或在屏幕上的位置。

如果您调整垫片的实际位置，一切都会重叠，如下所示：

.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;
}