flexboxの子要素に指定したz-indexが効いてしまう現象

flexboxの子要素に指定したz-indexがpositionがなくても効いてしまうということがあったので、調べた内容をメモしておきます。

サンプルコード

まずは意図しない表示になった例です。
サイドバーのあるレイアウトで、下部に固定フッターがある想定です。

<div class="contents">
	<div class="sub">sub</div>
	<div class="main">main</div>
	<div class="fix-footer">footer</div>
</div>

CSSは必要部分のみ抜粋しています。

.contents {
	display: flex;
}
.sub {
	position: static;
	z-index: 200;
	width: 200px;
}
.main {
	flex: 1;
}
.fix-footer {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 100;
	width: calc(100% - 40px);
}

.subのz-indexはスマホ時に設定したスタイルが残っていたものですが、position: static;を設定しているため効かない想定です。
これで問題ないかと思ったのですが、.subが.fix-footerより上の重なり順になっていました。
flexbox + z-indexでうまくいかなかった場合のデモページ

調べてみると、flexboxの子要素やgridの子要素にz-indexを指定した場合、重なり順の比較対象になってしまうようです。
今回の例の場合、.subのz-indexの値を変更することで対応できました。

.contents {
	display: flex;
}
.sub {
	position: static;
	z-index: 1;
	width: 200px;
}
.main {
	flex: 1;
}
.fix-footer {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: 100;
	width: calc(100% - 40px);
}

flexbox + z-indexの対応後のデモページ

上記以外にも、opacityやtransform、filterなどを指定した要素も重なり順の比較対象になります。
ただflexboxやgridとは違い、z-indexによって重なり順を調整することはできないようです。
詳しくは下記デモをご確認ください。

opacity、transform、filterのデモページ