レイアウト
z-index
z-index は、重なった要素のどれを手前に描くか（重なり順）を整数で指定します。値が大きいほど手前になります。
構文
auto | <integer>プレビュー
コード
.box {
display: flex;
}
.box > :nth-child(2) {
z-index: 1;
}コントロール
解説
値の書き方
auto（初期値）か整数を書きます。負の値も書けます。同じ重なりの文脈（下で説明します）の中では、値の大きい要素ほど手前に描かれ、値が同じなら HTML であとに書いた要素が手前になります。
このページのプレビューは、補助の宣言で箱を display: flex にして、少しずつ重ねた項目の 2 番目だけに z-index を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。auto では、あとの項目ほど手前なので、2 の項目の右端は 3 の項目に隠れます。1 にすると、2 の項目が両隣より手前に出ます。
効く要素
z-index が効くのは、position が static 以外の要素と、フレックスボックスやグリッドの項目です。ふつうのブロックやインラインの要素に書いても、position を書くまでは何も変わりません。
重なりの文脈
auto 以外の値を書いた要素は、重なりの文脈（スタッキングコンテキスト）を作ります。その中の子要素の z-index は、文脈の中だけで比べられます。親が文脈を作っていると、子にどれだけ大きな値を書いても、親の外の要素より手前には出られません。
opacity が 1 未満、transform・filter を書いた、isolation: isolate を書いた要素なども、重なりの文脈を作ります。思った順に重ならないときは、親にこれらが付いていないかを確かめます。
0 と auto の違い
0 は重なりの文脈を作り、auto の項目よりあとに描かれます。そのため、プリセットの 0 にすると、auto のままの 3 の項目より 2 の項目が手前に出ます。
負の値は箱の背景の後ろに回る
負の値の要素は、いちばん近い重なりの文脈の中で、ふつうの要素の背景より後ろに描かれます。このページのプレビューでは箱が文脈を作っていないので、-1 にすると 2 の項目は箱の白い背景の後ろに回って見えなくなります。箱に isolation: isolate などを書いて文脈を作ると、項目は箱の背景より手前、ほかの項目より後ろに描かれます。