CSSのZ-Indexのマスター

CSSのZ-Index属性：ページ要素の順序を制御するための強力なツールスタッキング

この記事では、Page要素のカスケード順序を制御するために使用されるCSSの

属性を調査します。値が高い要素は、値が低い要素に表示されます。これは、それぞれ要素の水平位置と垂直位置を制御するページ上のx軸とy軸に類似しており、

はz軸上の要素の積み重ね順序を制御します。 z-index z-index

キーポイント：

の属性は、ページ要素のスタッキング順序を制御します。属性の値が

、
• 、またはz-indexである要素でのみ機能します。 position absolute relativeをfixed、
、
• 、position: relative、またはtop属性に割り当てることなく、元の位置を変更せずに要素のスタッキング順序を制御できます。ページ。 right bottomleft値の解析は、親のスタッキングコンテキスト内で実行されます。つまり、要素の
値が高い場合でも、親コンテナの
• 値が低い場合、要素は他の場所に表示される場合があります。 。 z-index z-index組織と柔軟性を向上させるには、100の増分を使用してz-index値を設定することをお勧めします。このアプローチは、2つの既存のレイヤーの間に新しいレイヤーを追加するときに、99の利用可能な数値選択を提供します。
• z-indexデフォルトのスタッキング順序

HTMLを作成する場合、ドキュメント内のバック要素は、デフォルトでフロント要素の上に積み重ねられます。

このHTMLスニペットでは、すべての要素がオーバーラップするように設定されている場合、フッターはボディコンテンツの上に積み重ねられ、ヘッダーの上部に積み重ねられます。

要素は、

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

属性と

、

、

、position、top>オフセット属性を組み合わせることで重複する可能性があります。 right bottom各要素のleft属性が

に設定されている場合、それらはすべて重複します。フッターはドキュメントで最後に表示されるため、デフォルトで最初の2つの要素の上に積み重ねられています。

position absoluteオフセットプロパティを使用して

および

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

を使用して、要素の積み重ね順序をより明確に確認します。

topスタックコンテキストleft

を使用して重複する要素を作成できますが、これはいわゆる

スタッキングコンテキストを作成しません。

position: absoluteスタッキングコンテキストは、次の方法で作成できます。 要素には

または

属性があり、

値は

ではありません。
• position: absoluteFlexBoxアイテムには、relativeではない値があります。 z-index auto要素の不透明度（
）は1未満です。
• auto要素のz-index属性は、非
値に設定されています。
• opacity
スタッキングコンテキストを作成および使用する一般的な方法が最初です。それに焦点を当てましょう。

• 前の例に戻ると、3つの要素が互いに重なり合っていますが、現時点ではz-index値はありません。

  z-index属性を使用すると、スタッキング順序を制御できます。

  フッターを1に設定すると、ボディz-indexから2、およびヘッダーz-indexから3を設定すると、デフォルトのスタッキング順序を完全に逆転させることができます。 z-index 表面では単純に思える：値が高いほど、要素が積み重ねる -

  は常に

  になります。残念ながら、現実はこれよりも複雑です。 z-index スタッキングコンテキストのz-index: 9999 z-indexz-index: 9

  コンテナ内にボックスを追加し、右下隅の外側に配置すると、ピンクの箱の下にある緑色の箱の上にあるのがわかります。

  <header class="site-header"></header>
  <main class="site-content"></main>
  <footer class="site-footer"></footer>

  site-content

  について知っていることに基づいて、この黄色のボックスをピンクのボックスの上に表示するには、

  .site-header, .site-content, .site-footer {
    position: absolute;
    width: 400px;
    padding: 20px;
  }
  .site-header {top: 0; left: 0;}
  .site-content {top: 50px; left: 50px;}
  .site-footer {top: 100px; left: 100px;}

  に対してより高い値を設定する必要があると思うかもしれません。

  z-index z-indexを4に設定した場合（上記の

  ）、変更は見られません。人々は通常、非常に多くの数で積み重ねを強制しようとします（9999のように）が、これも効果はありません。コードベースで見られるような

  値はコード臭いですので、可能であれば避けてください。 z-index z-index: 3ピンク色のボックスの上にイエローボックスが配置されたという期待される結果を得られない理由は、z-indexの積み重ねのコンテキストで動作する方法です。

  これを実証するために、MDN Webサイトから借りたほんの少し複雑な例を見てみましょう。

  z-index...（MDN例のHTMLおよびCSSコードは、記事が長すぎるため、ここでは省略されていますが、重要な説明の部分は保持されます）....

  これらすべては、すべての

  値が親のスタッキングコンテキスト内で解析されているという事実によって説明できます。親コンテナ

  の値はフッターよりも高いため、

  内のすべての位置決め要素はそのコンテキストで評価されます。

  z-index積み重ねられたコンテキスト内の要素の積み重ね順序を理解すると、ネストされた注文リストの子供と比較できます。 .site-content z-indexこれは次のように書くことができます：.site-content

  ヘッダー：

  件名：
  • z-index: 5ボックス1：
  • z-index: 4ボックス2：
    • z-index: 4.6ボックス3：
    • z-index: 4.1
    フッター：
    • z-index: 4.3
    したがって、
    ヘッダーの
  が5で、ボックス1の
  • が6であっても、レンダリング順序は4.6で、まだ5未満です。したがって、ボックス1はヘッダーの下に表示されます。 z-index: 2
  最初は少し混乱していましたが、練習とともに本当に意味があり始めました！

  z-indexは、要素の配置z-indexにのみ適しています

  要素のスタッキング順序を制御する場合は、z-indexを使用できます。ただし、要素の値がposition、absolute、またはrelativeの場合にのみ有効になります。 fixed z-index要素を正確に配置することは、複雑なレイアウトや興味深いUIパターンを構築するのに最適ですが、ページ上の元の位置に要素を移動せずにスタッキング順序を制御することが望ましいことがよくあります。

  これが当てはまる場合は、position、

  、

  、position: relative、またはtopの価値を提供しないように設定できます。要素はページ上の元の位置のままで、ドキュメントのフローは中断されず、right値が有効になります。 bottom left負のz-index値を使用できますz-index

  水分補給要素は、複雑な形状またはUIコンポーネントを構築するためによく使用されます。これは通常、要素が互いに重ねられ、

  値が増加し続けることを意味します。要素を別の要素の下に配置するには、より低い

  値を持つ必要がありますが、これは負になる可能性があります。

  z-indexこれは、擬似要素を使用する場合に役立ち、親要素コンテンツの背後に配置したい場合があります。 z-index スタッキングコンテキストの仕組みにより、または

  要素が親要素のテキストコンテンツの後に配置される場合、負の

  値を設定する必要があります。

  z-index戦略:before :afterプロジェクトにz-indexを適用するときに使用した簡単な戦略を要約しましょう。

  値の1桁の増分

  を使用しましたが、2つの要素の間に

  とz-indexに設定された新しい要素を追加する場合はどうでしょうか？多くの値を変更する必要があります - おそらくコードベース全体で問題を引き起こす可能性があり、ウェブサイトの他の部分でCSSの休憩を引き起こす可能性があります。

  100ステップでz-indexを設定します

  z-indexz-index: 3を扱うとき、このようなコードがよく表示されます。 z-index: 4

  私の意見では見た目が悪くなります（そして、

  を添付した後にのみ悪化します）。そのような値を見ることは、通常、開発者がスタッキングのコンテキストを理解せず、一方のレイヤーを他の層の上に強制しようとしていることを示します。

  9999、53、または12などの任意の数字を使用する代わりに、z-index比率を体系化し、プロセスをより多くの順序にすることができます。開発者が強迫性障害を持っているという理由だけではありません。真剣に。

  <header class="site-header"></header>
  <main class="site-content"></main>
  <footer class="site-footer"></footer>

  の1桁の増分を使用しませんでしたが、100分の増加を使用しました。 !important

  私はこれを行い、物事を整理し続け、プロジェクトで使用されている多くのレイヤーにも気付きました。もう1つの利点は、他の2つのレイヤーの間に新しいレイヤーを追加する必要がある場合、99の潜在値から選択できることです。 z-index

  このマニュアルアプローチは、システムを構築するときに非常に信頼性が高くなりますが、SASSのようなプリプロセッサと組み合わせて使用​​すると、より柔軟になります。

  z-index...（FAQの部分は、以前の出力により繰り返しであるため、ここでは省略されています）...

  

以上がCSSのZ-Indexのマスターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。