positionプロパティとz-indexプロパティによる重なりを確認します。
デモページはこちら

以下のhtml構造で確認します。クラス名div-childのdivタグに、順番にオレンジ・緑・青の背景色をつけます。

<div class="div-parent">
<div class="div-child"></div>
<div class="div-child"></div>
<div class="div-child"></div>
</div>

CSSでposition、z-indexの指定がない場合、htmlの記述が後の要素が上に重なります。

緑のみposition: relativeを指定すると、緑の要素が一番上に重なります。これはabsoluteやfixedを指定した場合も同じで、positionを指定していない要素よりも重なりが1段階上になります。

緑にposition: relativeを指定したままで、青にtransform: translateX(20px)を指定すると青の要素が一番上に重なります。transformを指定した要素は、z-index: 0のスタックコンテキストのふるまいになるためです。

緑にposition: relativeを指定したままで、青にopacity: .8を指定した場合もtransformを指定した時と同様の表示になります。

最後に、緑にposition: relative、z-index: 10、青にtransform: translateX(20px)、opacity: .8を指定します。緑がスタックコンテキストになり、なおかつz-indexで0よりも大きい10を指定しているため、緑の要素が一番上に重なります。

「positionがrelativeかabsolute」で、なおかつ「z-indexが初期値のauto以外」の要素はスタックコンテキストを形成します。また「positionがfixedかsticky」の場合は、z-indexの指定がなくてもスタックコンテキストを形成します。