WebページのレイアウトにCSSの配置を使用する際の課題の1つは、一部の要素が他の要素と重複する可能性があることです。 HTMLの最後の要素を一番上にしたい場合はうまくいきますが、そうでない場合や、現在「他の要素と重ならない要素を持つ場合は何をしますか？ ？要素の重なり方を変更するには、CSSのプロパティを使用する必要があります。
WordやPowerPointでグラフィックスツールを使用したり、Adobe Photoshopなどのより堅牢なイメージエディタを使用していれば、実際にZ-Indexのようなものを見たことがあります。これらのプログラムでは、描画したオブジェクトを強調表示して、ドキュメントの特定の要素を「戻る」または「前面に表示する」オプションを選択できます。 Photoshopではこれらの機能はありませんが、プログラムの「レイヤー」ペインがあり、これらのレイヤーを並べ替えることで要素がキャンバス上のどこに配置されるかを調整できます。これらの例では、基本的にこれらのオブジェクトのZ-インデックスを設定しています。
Zインデックスとは何ですか？
ページ上の要素を配置するためにCSSの配置を使用するときは、3次元で考える必要があります。左右に2つの標準寸法があります。左から右のインデックスはxインデックスと呼ばれ、上から下のインデックスはyインデックスです。これは、これらの2つのインデックスを使用して要素を水平または垂直に配置する方法です。
ウェブデザインに関しては、ページの積み重ね順序もあります。ページ上の各要素は、他の要素の上または下に重ねることができます。 z-indexプロパティは、各要素がスタック内のどこにあるかを決定します。 x-indexとy-indexが水平線と垂直線である場合、z-indexはページの深さであり、本質的に3次元です。
Webページの要素を紙の部分、Webページそのものをコラージュと考えることができます。紙を置く場所は、配置によって決定され、他の要素によってどれだけ覆われているかは、Z-インデックスです。
- z-インデックスは、正（例えば100）または負（例えば-100）のいずれかの数値である。
- デフォルトのZインデックスは0です。
最高のz-索引を持つ要素が上にあり、次に高いものが下位のz-索引に続いています。 2つの要素が同じz-インデックス値を持つ場合（または定義されていない場合、デフォルト値の0を使用することを意味します）、ブラウザはHTMLに表示されている順序でレイヤーを重ねます。
Z-インデックスの使い方
スタック内の各要素に異なるZ-インデックス値を与えます。たとえば、5つの異なる要素があるとします。
- 要素A - zのインデックス-25
- 要素B - 82のzインデックス
- 要素C - z-indexが設定されていない
- 要素D-z-インデックス10
- 要素E - z-インデックス-3
それらは次の順序でスタックされます：
- 要素B
- 要素D
- 要素C
- 要素E
- 要素A
あなたの要素を積み重ねるためには、大きく異なったZ-インデックス値を使用することをお勧めします。そうすれば、あとで要素をページに追加すると、他のすべての要素のZ-インデックス値を調整しなくても、それらを重ねる余裕ができます。例えば：
- 一番上の要素には100
- あなたの中間要素に0
- あなたのボトム要素の-100
2つの要素に同じz-インデックス値を与えることもできます。これらの要素が積み重ねられている場合は、HTMLに書かれた順に表示され、最後の要素が上に表示されます。
注意：要素がz-indexプロパティを効果的に使用するためには、要素がブロックレベルの要素であるか、またはCSSファイルの "ブロック"または "インラインブロック"の表示を使用する必要があります。
