CSS - Z-Index: Layering Elements Mastery
こんにちは、未来のウェブデザイン魔法使いたち！今日は、CSSの中でも最も魔法のようなプロパティ、z-indexについてお話しします。これは、他の要素の上にどの要素が表示されるかをコントロールできるスーパーパワーのようなものです。ワクワクしますよね？一緒にこの旅に出発しましょう！
What is Z-Index? (Z-Indexとは何か？)
本題に入る前に、まずz-indexとは何についているのかを理解しましょう。あなたがデスクに紙の山を並べているとします。z-indexは、どの紙を他の紙の上に置くかを決めるようなものです。ウェブデザインでは、重なっている要素のスタックオーダーをコントロールするのに役立ちます。
A Brief History Lesson (簡単な歴史のレッスン)
ウェブデザインの初期の日々では、層状のレイアウトを作成するのは悪夢でした。粗いテーブルベースのデザインを使ったり、フレームを使うことを余儀なくされました（うえぇ！）。そしてz-indexが登場し、突然、複雑な重なるデザインを簡単に作成できるようになりました。まるでビデオゲームの裏道を発見したようなものです！
Possible Values (可能な値)
では、z-indexが取れる異なる値を見てみましょう：
| 値 | 説明 |
|---|---|
| auto | デフォルト値。要素はHTML内の順番にスタックされます |
| number | 正の数値または負の数値。高い数値が低い数値の上に表示されます |
| initial | z-indexをデフォルト値に設定します |
| inherit | 親要素からz-indexの値を継承します |
Applies to (適用範囲)
Z-indexは配置された要素（position: relative、absolute、fixed、またはsticky）に適用されます。これはデフォルトの配置（static）には効果ありません。
DOM Syntax (DOM構文)
以下のように、HTML内でz-indexを設定します：
<div style="z-index: 1;">I'm on top!</div>
<div style="z-index: 0;">I'm below!</div>しかし、スタイルを別のCSSファイルに保持する方が通常は良いです。それでは、どのように見えるかを見てみましょう：
.on-top {
z-index: 1;
}
.below {
z-index: 0;
}<div class="on-top">I'm on top!</div>
<div class="below">I'm below!</div>CSS z-index - auto Value (CSS z-index - auto値)
z-indexを指定しない、または'auto'に設定すると、要素はHTML内の順番にスタックされます。例を見てみましょう：
<div class="box red">Red Box</div>
<div class="box blue">Blue Box</div>
<div class="box green">Green Box</div>.box {
width: 100px;
height: 100px;
position: absolute;
}
.red {
background-color: red;
left: 0;
top: 0;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
}
.green {
background-color: green;
left: 100px;
top: 100px;
}この場合、緑のボックスが上に表示され、その次に青、そして赤です。まるで跳び馬のゲームをしているようなものです！
CSS z-index - with Positive Integer (CSS z-index - 正の整数)
では、少し手を加えてみましょう。正の整数を使って明示的にスタックオーダーをコントロールします：
.red {
background-color: red;
left: 0;
top: 0;
z-index: 3;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
z-index: 2;
}
.green {
background-color: green;
left: 100px;
top: 100px;
z-index: 1;
}これらのz-index値により、赤が上に表示され、その次に青、そして緑です。まるでVIPパスを持っているような特別なクラブにいるようなものです！
CSS z-index - With Negative Integer (CSS z-index - 負の整数)
負のz-index値は、要素を地下室に送るようなものです。正の数値またはz-indexを持たない要素の背後に表示されます：
.background {
background-color: yellow;
z-index: -1;
}
.content {
z-index: 0;
}ここでは、黄色の背景が常にコンテンツの背後に表示されます。まるで芝居の背景を設定しているようなものです！
CSS z-index - With Sticky Position (CSS z-index - Sticky配置)
Sticky配置は、要素が通常の流れを離れて特定の条件下で only under certain conditions. Z-indexもsticky配置と一緒に動作します：
.sticky-header {
position: sticky;
top: 0;
z-index: 100;
}このヘッダーは、スクロールするとviewportの顶部に固定され、他のコンテンツの上に表示されます。まる忠诚な友達のように、いつもあなたの背中を守っています！
CSS z-index - With Fixed Position (CSS z-index - Fixed配置)
Fixed配置はabsoluteと似ていますが、常にviewportに基づいています。z-indexは非常に役立ちます：
.modal {
position: fixed;
z-index: 1000;
}
.overlay {
position: fixed;
z-index: 999;
}これにより、モーダルダイアログがオーバーレイの上に常に表示されるようにします。まるでスターのショーが常に注目の的になるように！
CSS z-index - With Static Position (CSS z-index - Static配置)
私がz-indexがstatic配置では動作しないと言ったことを覚えていますか？では、以下はその結果です：
.static-element {
position: static;
z-index: 999; /* これは効果ありません */
}まるで魔法の呪文を魔法のない世界で使おうとしているようなものです - 効果はありません！
CSS z-index - With Relative Position (CSS z-index - Relative配置)
Relative配置はz-indexが光を放つ場所です。複雑なレイアウトを作成しながらドキュメントの流れを変更することなくできます：
.parent {
position: relative;
}
.child1 {
position: relative;
z-index: 2;
}
.child2 {
position: relative;
z-index: 1;
}ここでは、child1がchild2の上に表示されます。たとえchild2がHTML内で後れていてもです。まるで要素に超能力を与えて、重力を凌駕するようなものです！
そして、ここまでがすべてです、皆さん！あなたのCSSスキルがz-indexの力でレベルアップしました。力には責任が伴います。z-indexを賢く使い、レイアウトが感謝してくれるでしょう。ハッピーコーディング、そしてz-indexがあなたとともに！
Credits: Image by storyset