先生と生徒の会話形式で理解しよう

生徒

「先生、Webサイトを見ていると文字の上に画像が重なっていたり、ボタンが浮いているみたいに見えることがありますよね。あれってどうやって作るんですか？」

先生

「それはCSSのz-indexとpositionを使って、要素を重ねているんです。簡単にいうと、どの要素を前に出すか、後ろに下げるかを決めているんですよ。」

生徒

「へえ！じゃあ、名札を胸につけるときに上に貼るか、シャツの下に隠すかを選ぶみたいな感じですか？」

先生

「そうそう！まさにそれと同じです。CSSで要素を重ねるときは、z-indexとpositionを組み合わせて使うのが基本なんですよ。」

1. z-indexとは？

z-index（ゼットインデックス）は、要素を「前後に重ねる順番」を決めるCSSプロパティです。数字が大きい要素ほど手前に表示され、数字が小さい要素は奥に表示されます。

ただし、z-indexを使うには条件があり、要素にposition（relative・absolute・fixed・sticky）が指定されていないと効果が出ません。

2. positionとは？

positionは、要素を配置する方法を決めるプロパティです。z-indexと一緒に使うことで、要素を好きな位置に動かしながら重ねられます。

static：デフォルト。普通に文書の流れどおりに配置。
relative：元の位置を基準にずらして配置できる。
absolute：親要素を基準に自由に配置できる。
fixed：画面全体を基準に固定される。
sticky：スクロールに応じて動いたり止まったりする。

3. z-indexとpositionを組み合わせて使う

では、実際にz-indexとpositionを使って要素を重ねる例を見てみましょう。


<style>
.box1 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
}
.box2 {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 2;
}
</style>

<div class="box1">青い箱</div>
<div class="box2">ピンクの箱</div>

ブラウザ表示

この例では、2つの四角形を少しずらして配置しています。z-index: 2を指定したピンクの箱が、z-index: 1の青い箱の上に重なって表示されます。

4. z-indexの数字の意味

z-indexの数字が大きければ大きいほど前に出ます。逆に小さい数字は奥に隠れます。数字にはマイナスも使えます。


<style>
.background {
    width: 200px;
    height: 200px;
    background-color: lightgray;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: -1;
}
.foreground {
    width: 150px;
    height: 150px;
    background-color: orange;
    position: absolute;
    top: 80px;
    left: 80px;
    z-index: 1;
}
</style>

<div class="background">背景の箱</div>
<div class="foreground">前の箱</div>

ブラウザ表示

この例では、灰色の箱にz-index: -1を指定しているので、オレンジの箱よりも後ろに表示されます。

5. よくある失敗例と注意点

初心者がz-indexを使うときによくあるミスを紹介します。

positionを指定していない：z-indexはstaticのままでは効かないので、必ずpositionをrelativeやabsoluteに設定する必要があります。
親要素の影響を受ける：子要素のz-indexは、親要素のz-indexの影響を受けます。親要素が手前にあると、どんなに子要素に大きなz-indexを設定しても奥に隠れることがあります。
数字をやたらに大きくしすぎる：z-indexを9999などに設定するケースがありますが、複雑になる原因なので、整理して使う方が良いです。