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