проблемы 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 не зависят друг от друга. Что бы я ни делал, график c по-прежнему отображается под 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;
}