z-indexで親要素の下に子要素を持ってく方法

コードから

inde.html

<div class="background"> 
    <div class="parent">
        <div class="children"></div>
    <div>
</div>

style.scss

.background {
    //背景色がある場合はこれらを指定しないと、下に潜り込んでしまう。
    position: relative;
    z-index: 0;
}
.parent {
    //位置決め
    position: relative
}
.background {
    position: absolute;
    z-index: -1;
}

調べたら色々な方法があるけれど、絶対位置で実装する場合はこの方法が一番楽（？）かな。
これで子が背景と親の真ん中に入り込んでいい感じ。
なんでz-index0よりもz-index-1が上に行くんだろう、不思議だね。

感想

記事とかあんまり書いたことないので、分かりにくい所、補足した方がいい所とかありましたら、教えてください。

参考 　

CSSのz-indexで親要素より下に子要素を配置する