カスケードスタイルシートを使用したオーバーラップ要素の配置
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-indexの使い方
スタック内の各要素に異なるZ-インデックス値を与えます。 たとえば、5つの要素があるとします。
- 要素1 -z-index -25
- 要素2 - 82のzインデックス
- 要素3 - z-indexが設定されていない
- 要素4 - zインデックス10
- 要素5 - z-インデックス-3
それらは次の順序でスタックされます：
- 要素2
- 要素4
- 要素3
- 要素5
- 要素1
私はあなたの要素を積み重ねるために、大きく異なったZ-インデックス値を使うことを勧めます。 そうすれば、あとで要素をページに追加すると、他のすべての要素のZ-インデックス値を調整しなくても、それらを重ねる余裕ができます。 例えば：
- 私の一番上の要素の100
- 私の中間要素のために0
- 私の底の要素のために-100
2つの要素に同じz-インデックス値を与えることもできます。 これらの要素が積み重ねられている場合は、HTMLに書かれた順に表示され、最後の要素が上に表示されます。
1つの要素は、z-indexプロパティを効果的に使用するためには、ブロックレベルの要素であるか、またはCSSファイルで "ブロック"または "インラインブロック"の表示を使用する必要があります。
Jennifer Kryninのオリジナル記事。 Jeremy Girardによって12/09/16に編集されました。