Stacking Context: Putting one child div above another - html

Question

I'm not quite understanding what rule of stacking context I am not understanding here. I have a 'divider' line ('divider-line') that I want to put behind a box div ('block').
Here is the HTML:
<div class="report-title">
<div class="divider-line"></div>
<div class="block">
<div class="icon">0</div>
<h1 class="text">FOO BAR</h1>
</div>
</div>
Here is the CSS(w/ scss nesting):
.report-title {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
width: 100%;
margin: 100px 0;
.block {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -100px;
z-index: 10;
height: 200px;
width: 475px;
.icon {
font-size: 9rem;
}
.text {
display: block;
}
}
.divider-line {
width: 100%;
height: 1px;
background-color: gray;
}
}
The HTML context, having 'divider-line' child come before it's sibling 'block' should put it behind no? The z-index of 10 on 'block' doesn't do anything, and I've tried putting a z-index of -1 on 'divider-line' as well (to no avail).
Any advice or direction would be great,

Answer 1

Without the z-index in you example, adding a background colour to the block shows that the divider is behind the block.
.report-title {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
width: 100%;
margin: 100px 0;
}
.block {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
background-color: #FFF;
top: -100px;
height: 200px;
width: 475px;
}
.icon {
font-size: 9rem;
}
.text {
display: block;
}
.divider-line {
width: 100%;
height: 1px;
background-color: gray;
}
<div class="report-title">
<div class="divider-line"></div>
<div class="block">
<div class="icon">0</div>
<h1 class="text">FOO BAR</h1>
</div>
</div>