正確に言うと効いてるんだけど効いてないように見えるという話。
z-indexが効かないときの一般的な対処法
- z-index以外の要因で重ね合わせコンテクストの変更が行われている
- 親要素のz-indexに影響を受けている
- positionがstatic
概ねこのあたりだと思うのですが、私は上記いずれを試してもz-indexの効果が確認されず、重ね合わせた時にz-indexの低い要素が高い要素の上に位置していました（るように見えました。）
原因
background-colorの初期値はtransparentなのですが、この値は実は透過色で要素が重なり合った時に下位の要素が視認できてしまいます。
私はデフォルトの背景色は白色だと思っていたので微妙にハマってしまいました。