More than 3 years have passed since last update.

z-indexが効かない！？　それ、スタックコンテキストのせいかも

Last updated at 2020-11-06Posted at 2020-11-06

はじめに

要素を重ねる時、z-indexの数字だけ意識していませんか？
スタックコンテキストを意識していないとz-indexの値をいくら大きくしても要素が思い通りに前面に来ない！という事があります。
今回は、そのスタックコンテキストを取り扱っていきます！

positionプロパティの値がstatic以外で、z-indexプロパティの値がauto以外の場合に生成される文脈　だそうです。
うーん、わかりづらい！笑

とりあえずベースとなるHTMLとCSSを作成

See the Pen
stack-context1 by Daichi Nabeshima (@nabeshi)
on CodePen.

次に.red, .blue, .greenにz-indexを付与する。

See the Pen
stack-context1 by Daichi Nabeshima (@nabeshi)
on CodePen.

z-indexが-100なのに最前面に来ているだと。。。

ここでもう一度スタックコンテキストの定義を思い出してみましょう。

positionプロパティの値がstatic以外で、z-indexプロパティの値がauto以外の場合に生成される文脈

.red, .blue, .greenはこの条件をクリアしているのでスタックコンテキストを生成している状態になります!

html要素はデフォルトでルートスタッックコンテキストを生成しています。
また、スタックコンテキストは必ずどこかのスタックコンテキストに所属します。

.redと.blueはルートスタックコンテキストに所属し、.greenは.blueのスタックコンテキストに所属します。

z-indexは所属するスタックコンテキスト内での順番を指定するプロパティなので、-100の値を設定しても所属するコンテキストが異なるため順番に変動がなかったということになります。