z-indexが機能しない4つの理由（およびそれを修正する方法）

z-indexとは何ですか？ Z-indexはCSSプロパティであり、HTML要素をレイヤーに重ねて配置できます。最初はシンプルに見えますが、一見シンプルです。

z-indexを999999に設定した場合でも、意図したとおりに動作しないようにする、奇妙で直感的でないルールがいくつかあります。

この記事では、z-indexが機能しない最も一般的な4つの理由について詳しく説明します。 CSSを使用して、要素を他の要素の前面または背面に移動する方法を学習します。

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

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

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

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

<div class="cat-top"></div>
    
<div class="content__block">
  Meow meow meow...
</div>
    
<div class="cat-bottom"></div>

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

これを実現するために、両方の猫の画像のCSSに負の余白を追加して、白いブロックと少し重なるようにしました。

.cat-top { 
    margin-bottom: -110px;
}  

.cat-bottom {    
    float: right;
    margin-top: -120px;
}

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

ペンのZインデックスを参照してください：＃1：位置の設定、＃2：自然な積み重ね順序、＃3：CodePenのJessica（@thecodercoder）によるCSSプロパティ。

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

なぜこれが起こっているのですか？

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

要素にz-indexが設定されていない場合でも、要素が一番上になる韻と理由があります。

この場合、どの要素にもz-index値はありません。したがって、それらの積み重ね順序は、それらの出現順序によって決定されます。このルールによれば、マークアップの後半にある要素は、それらの前にある要素の上に配置されます。

（ここでMozilla Developer Networkでスタック順序ガイドラインの詳細を読むことができます。）

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

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

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

2。要素の位置が設定されていません

積み重ね順序を決定する他のガイドラインの1つは、要素にその位置が設定されているかどうかです。

要素の位置を設定するには、CSSのpositionを追加します static以外のプロパティ、relativeのようにまたはabsolute 。（私が書いたこの記事でそれについてもっと読むことができます。）

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

したがって、白いブロックをposition: relativeに設定します、2つの猫の要素を配置しないままにすると、猫の一番上に白いブロックが積み重ねられます。

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

ウーフー！

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

ただし、そうすると、より多くのz-indexが発生する可能性があります関連する混乱。次のパートで問題と解決策について説明します。

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

さっき言ったように、下の猫をひっくり返したいと思います。これを実現するために、transform: rotate(180deg)を追加します。

.cat-bottom { 
    float: right;
    margin-top: -120px;
    transform: rotate(180deg);
}

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

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

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

これが意味するのは、transformを追加することです .cat-bottomへ要素は、z-indexがあるかのように動作させます positionがない場合でもまたはz-index 全部セット！（W3.orgには、これがopacityでどのように機能するかについて、有益であるがかなり密度の高いドキュメントがあります。プロパティ）

z-indexを追加したことはありません。白いブロックの値、position: relativeのみ。これは、配置されていない猫の上に白いブロックを配置するのに十分でした。

しかし、.bottom-cat以降要素は、z-index: 0で比較的配置されているかのように動作します、変換すると、白いブロックの上に配置されます。

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

.content__block {
    position: relative;
    z-index: 2;
}
.cat-top, .cat-bottom {
    position: relative;
    z-index: 1;
}

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

それでは、z-indexという最後の理由に移りましょう。動作していません。これは、親要素と子要素が含まれるため、もう少し複雑です。

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

このためのコード例を確認してみましょう：

Pen Z-index：CodePenのJessica（@thecodercoder）による＃4の異なるスタッキングコンテキストを参照してください。

これが私たちの持っているものです：通常のコンテンツを含むシンプルなウェブページと、コンテンツの上に配置された「フィードバックを送信」と書かれたピンクのサイドタブ。

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

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

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

.content {
    position: relative;
    z-index: 1;
}

.modal {
    position: fixed;
    z-index: 100;
}

.side-tab {
    position: fixed;
    z-index: 5;
}

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

次に、モーダルにはz-index: 100があります。 すべき z-index: 5のサイドタブの上に配置します。ただし、代わりに、モーダルオーバーレイはサイドタブの下にあります。

なぜこれが起こっているのですか？

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

しかし、スタッキングコンテキストのさらに別の側面は、子要素がその親のスタッキングコンテキストに制限されることです。

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

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

<section class="content">            
    <div class="modal"></div>
</section>

<div class="side-tab"></div>

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

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

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

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

（この少し気のめいるような比喩でそれを思い出すことができます。子供は親によって制限される可能性があり、親から離れることはできません。）

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

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

<section class="content"></section>

<div class="modal"></div>

<div class="side-tab"></div>

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

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

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

代替ソリューション：コンテンツからポジショニングを削除します。モーダルのz-indexを制限します。

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

.content {
    // No position set    
}

.modal {
    position: absolute;
    z-index: 100;
}

.side-tab {
    position: absolute;
    z-index: 5;
}

コンテンツ要素が配置されていないため、モーダルのz-indexが制限されなくなりました。価値。したがって、オープンモーダルは、z-indexが高いため、サイドタブ要素の上に配置されます。 100の。

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

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

まとめ

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

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

リソース：

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

HTML/CSSで背景色を変更する方法

初心者向けのGulp4チュートリアル（SassおよびJSワークフロー）