【CSS】z-indexが効かない時のチェックポイント

チェックポイント

・z-indexは数字の大きいものが上
・positionがrelative、absolute、fixed、stickyのどれかでないとダメ
・positionがstaticの場合は効かない
・positionは省略すると、staticになる
・opacity: 1以外を指定している
・transform: none以外を指定している

調べたこと

仕様

CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。

---

位置指定されたボックス (つまり、 position が static 以外のもの) では、 z-index プロパティが以下のことを定義します。
z-index - CSS: カスケーディングスタイルシート | MDN

static | relative | absolute | sticky | fixed
position - CSS: カスケーディングスタイルシート | MDN

・z-index なしの重ね合わせ - CSS: カスケーディングスタイルシート | MDN

このプロパティを 1 以外の値で用いると、その要素は新しい重ね合わせコンテキストを作ります。
opacity - CSS: カスケーディングスタイルシート | MDN

このプロパティに none 以外の値が設定されていると、重ね合わせコンテキスト が作成されます。
transform - CSS: カスケーディングスタイルシート | MDN

仕様は上記のようになってます。

参考

スタックコンテキストを生成するパターンとして

・position: relativeまたはposition: absoluteで z-index: auto以外を指定
・position: fixedまたはposition: stickyを指定
・opacity: 1以外を指定
・transform: none以外を指定

この辺を指定した場合はz-indexが意図した通りにならない可能性があります！
z-index: 0とz-index: autoは意味が違うから気をつけて！
z-indexが言うことを聞いてくれない場合はこの辺のことが原因だと思うよ - Qiita

個人的には、上記がわかりやすい気がします。