Z-Indexが機能しない4つの理由(およびその修正方法)

Z-indexはCSSのプロパティであり、レイヤー内の要素を重ねて配置できます。これは非常に便利で、正直、CSSでの使用方法を知るための非常に重要なツールです。

残念ながら、z-indexはこれらのプロパティの1つであり、常に直感的な方法で動作するとは限りません。最初は単純に思えますが、z-indexの数値が大きいほど、z-indexの数値が小さい要素の上に要素が配置されます。しかし、物事をより複雑にするいくつかの追加のルールがあります。また、z-indexを999999に設定しても、常に修正できるとは限りません!

この記事では、z-indexが機能しない4つの最も一般的な理由と、その修正方法について詳しく説明します。

実際のコード例をいくつか見て、問題を解決します。この記事を読んだ後、これらの一般的なz-indexの落とし穴を理解し、回避できるようになります!

最初の理由を見てみましょう。

1.同じスタッキングコンテキスト内の要素は、表示順に表示され、前の要素の上に後の要素が表示されます。

最初の例では、3つの主要な要素を含む比較的単純なレイアウトがあります。

  • 猫の画像
  • テキスト付きの白いブロック
  • 同じ猫の別の画像

そのためのHTMLマークアップは次のとおりです。

ニャーニャーニャー...

このレイアウトでは、理想的には、テキストの白いブロックを両方の猫の上に配置する必要があります。

これを実現するために、両方の猫の画像のCSSにいくつかの負のマージンを追加し、白いブロックに少し重なるようにしました。

.cat-top {
   マージン底:-110px;
}
.cat-bottom {
   フロート:右;
   マージン上部:-120px;
}

ただし、次のようになります。

最初の猫は、まさに私たちが望むように、白いコンテンツブロックの下に配置されています。しかし、2番目の猫の画像はブロックの上に配置されています!

なぜこうなった?

この動作の理由は、Webページの自然なスタック順序によるものです。これらのガイドラインは基本的に、どの要素が一番上に、どれが一番下にあるかを決定します。

要素にZインデックスが設定されていなくても、韻を踏む理由と理由があります。

この例では、どの要素にもz-index値がありません。したがって、スタックの順序は、表示の順序によって決まります。この規則によれば、マークアップの後半にある要素は、その前にある要素の上に配置されます。

(スタック開発ガイドラインの詳細については、Mozilla Developer Networkでこちらをご覧ください。)

猫と白いブロックの例では、彼らはこの規則に従っています。そのため、最初の猫は白いブロック要素の下にあり、白いブロックは2番目の猫の下にあります。

さて、スタックの順序はすべて順調ですが、2番目の猫が白いブロックの下にくるようにCSSを修正するにはどうすればよいですか?

2番目の理由を見てみましょう。

2.要素には位置が設定されていません

スタックの順序を決定する他のガイドラインの1つは、要素に位置が設定されているかどうかです。

要素の位置を設定するには、相対または絶対など、静的以外のものにCSS位置プロパティを追加します。 (これについては、私が書いたこの記事で詳しく読むことができます。)

このルールに従って、配置された要素は、配置されていない要素の上に表示されます。

したがって、白いブロックをposition:relativeに設定し、2つのcat要素を未配置のままにすると、スタックの順序で猫の上部に白いブロックが配置されます。

これは、どのように見えるかです-上記のCodepenで遊ぶこともできます。

やったー!

次に、transformプロパティを使用して、下の猫を上下逆さまに回転させます。そうすれば、両方の猫は頭だけが突き出た白いブロックの下になります。

ただし、これを行うと、z-index関連の混乱が生じる可能性があります。次のパートでは、問題と解決策について説明します。

3.不透明度や変換などのCSSプロパティを設定すると、要素が新しいスタックコンテキストに配置されます。

先ほど述べたように、下の猫を逆さまにしたいと思います。これを実現するために、変換を追加します:rotate(180deg)。

.cat-bottom {
   フロート:右;
   マージン上部:-120px;
   変換:rotate(180deg);
}

しかし、これにより、下の猫が再び白いブロックの上に表示されます!

ここで一体何が起こっているのですか??

この問題に頻繁に遭遇することはないかもしれませんが、スタック順序のもう1つの側面は、transformやopacityなどの一部のCSSプロパティが要素を独自の新しいスタックコンテキストに配置することです。

つまり、変換を.cat-bottom要素に追加すると、z-indexが0であるかのように動作します。位置やz-indexがまったく設定されていなくても! (W3.orgには、これがopacityプロパティでどのように機能するかについての有益な、しかしかなり密なドキュメントがあります)

白いブロックにz-index値を追加したことはなく、position:relativeのみを追加したことに注意してください。これは、未配置の猫の上に白いブロックを配置するのに十分でした。

ただし、.bottom-cat要素は、z-index:0を使用して相対的に配置されているように動作するため、変換すると、白いブロックの上に配置されます。

これに対する解決策は、位置を設定することです:相対的で、少なくとも白いブロックに明示的にz-indexを設定します。さらに一歩進めて、位置を設定することができます:余分に安全にするために、cat要素の相対およびより低いz-indexを設定します。

.content__block {
   位置:相対;
   z-index:2;
}
.cat-top、.cat-bottom {
   位置:相対; z-index:1;
}

私の意見では、これを行うことで、より基本的なz-indexの問題のすべてではないにしても、ほとんどを解決できます。

それでは、z-indexが機能しないという最後の理由に移りましょう。これは、親要素と子要素を含むため、もう少し複雑です。

4.親のz-indexレベルにより、要素はより低いスタックコンテキストにあります

このためのコード例をチェックしましょう:

これは、通常のコンテンツを備えたシンプルなWebページと、コンテンツの上に配置された「フィードバックを送信」というピンクのサイドタブです。

次に、猫の写真をクリックすると、透明な灰色の背景オーバーレイが表示されたモーダルウィンドウが開きます。

ただし、モーダルウィンドウが開いている場合でも、サイドタブは灰色のオーバーレイの上にあります。サイドタブを含むすべての上にオーバーレイを表示する必要があります。

問題の要素のCSSを見てみましょう。

.content {
   位置:相対;
   z-index:1;
}
.modal {
   位置:固定;
   z-index:100;
}
.side-tab {
   位置:固定;
   z-index:5;
}

すべての要素には位置が設定されており、サイドタブのz-indexは5で、コンテンツ要素(z-index:1)の上に配置されます。

次に、モーダルにはz-index:100があり、z-index:5のサイドタブの上部に配置する必要がありますが、モーダルオーバーレイはサイドタブの下にあります。

なぜこうなった?

以前は、要素に位置が設定されているかどうか、マークアップでの順序など、スタッキングコンテキストに入るいくつかの要因に対処しました。

ただし、スタックコンテキストのもう1つの側面は、子要素がその親のスタックコンテキストに制限されることです。

問題の3つの要素を詳しく見てみましょう。

マークアップは次のとおりです。

    

マークアップを見ると、コンテンツとサイドタブの要素が兄弟であることがわかります。つまり、それらはマークアップの同じレベルに存在します(これはz-indexレベルとは異なります)。そして、モーダルはコンテンツ要素の子要素です。

モーダルはコンテンツ要素内にあるため、そのz-indexが100であるのは、その親であるコンテンツ要素内のみです。たとえば、モーダルの兄弟である他の子要素がある場合、それらのz-index値はそれらを互いの上または下に配置します。

ただし、これらの子要素のz-index値は、親コンテンツ要素のz-indexが1に設定されているため、親の外側を意味するものではありません。

したがって、モーダルを含むその子は、そのz-indexレベルから抜け出すことはできません。

(この少し憂鬱な比phorでそれを思い出すことができます:子供はその親によって制限されることができ、彼らから自由になることはできません。)

この問題にはいくつかの解決策があります。

解決策:モーダルをコンテンツの親の外側に移動し、ページのメインスタッキングコンテキストに移動します。

修正されたマークアップは次のようになります。

現在、モーダル要素は、他の2つの要素の兄弟要素です。これにより、3つすべての要素が同じスタッキングコンテキストに配置されるため、各z-indexレベルは相互に影響します。

この新しいスタッキングコンテキストでは、要素は上から下に次の順序で表示されます。

  • モーダル(z-index:100)
  • サイドタブ(z-index:5)
  • コンテンツ(z-index:1)

代替ソリューション:コンテンツから位置を削除して、モーダルのz-indexを制限しないようにします。

マークアップを希望しない、または変更できない場合は、コンテンツ要素から位置設定を削除することでこの問題を修正できます。

.content {
   //位置が設定されていません
}
.modal {
   位置:絶対;
   z-index:100;
}
.side-tab {
   位置:絶対;
   z-index:5;
}

コンテンツ要素は現在配置されていないため、モーダルのz-index値を制限しなくなりました。したがって、zインデックスが100であるため、開いているモーダルはサイドタブ要素の上部に配置されます。

これは機能しますが、私は個人的に最初の解決策に行きます。

何らかの理由でコンテンツ要素を配置する必要がある場合、スタックコンテキストでのモーダルの順序が再び制限されるためです。

要約すれば

このチュートリアルがお役に立てば幸いです!要約すると、z-indexのほとんどの問題は、次の2つのガイドラインに従うことで解決できます。

  1. 要素の位置が設定され、z-index番号が正しい順序になっていることを確認してください。
  2. 子のz-indexレベルを制限する親要素がないことを確認してください。

リソース:

  • W3.org:透明性:「不透明度」プロパティ
  • W3.org:スタックレベルの指定
  • Mozilla Developer Network:スタッキングコンテキスト
  • PhilipWalton.com:Z-indexについて誰もあなたに言っていないこと
  • Smashing Magazine:Z-index CSSプロパティ

もっと欲しい?

myブログcoder-coder.comでチュートリアルをご覧ください。
hereここにサインアップして、新しい記事に関するメールを受け取ります。
2 25,000人以上の参加— Instagramで@thecodercoderをフォローしてください。