【CSS3】あれ？z-indexが効かないぞ？と思った時に読む備忘録

あれ？

効かない…

なぜだ…出てこい…

うおりゃあぁぁぁ！！

…

もうダメだ……

…

こんなあなたを、救いたい。

今回は、z-indexが効かない場合に思い出す4つの方法について説明します。

z-indexが効かない3つの原因

要素の重なりを簡単に操れるプロパティ、z-index。

これが効かない原因は、主に3つに分けられます。

要素にpositionが指定されていない

これが一番見落としがちな所です。

position: relative(相対位置)　または

position: absolute(絶対位置)　で、要素の居場所を示してあげましょう。

そうすると、本来の順番で表示してくれます。

他の親要素を飛び越えようとしている

2つ目にやりがちなミスはこちらです。

たとえz-indexを1000にしようと、9999999にしようと、

子要素が親要素を飛び越えることはありません。

htmlの構造を見直して、親ごと上に重ねるのか、構造自体を変えるのか、状況によって使い分けましょう。

transformを指定している

上に重なっている要素にtransformの指定をしていませんか？

cssアニメーションなどでtransformを指定している場合に起こりがちなミスですね…

transformやopacityプロパティを要素に定義すると、『自身の新しい積み重ねコンテキストに配置される』という特殊なルールがあります。

z-indexが0であるかのような振る舞いを勝手にしてしまうんですね。

この場合も、position: relative;を指定し、z-indexを明示してあげることで解決することができます。

positionを指定しているか？に注目！

これまででわかったように、要素の重なりを表すz- indexプロパティには、『位置を明示してあげること』で解決することができます。

悩んだらまずはここを確認してみてください！

それでは、また。（いい声）