z-index issues - div not overlaying another

Question

So I have an issue and despite spending on research a while now I still cannot figure out what I am doing wrong.

Consider the following:

/* 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;
}

and 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>

I am expecting to see the spacer (with some fancy graphics) to overlay the main row but this isn't happening. The position is specified, the z index is set correctly, the two divs are independent of each other. Whatever I do the graphic still is displayed below the main-row div

Answer 1

I think you're confusing background-position and element positioning. Background positioning changes the position of your background relative to wherever the element is on the screen. The background is still contained by the element, and otherwise does not affect the element's size or position on the screen.

Everything will overlap if you adjust the actual position of the spacer, like so:

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