CSSのz-indexとposition完全ガイド！初心者でもわかる要素を重ねる方法

1. z-indexとは？重ね順の基本をマスター

1. z-indexとは？重ね順の基本をマスター

z-index（ゼットインデックス）は、Webページ上の要素を「重なりの前後関係（奥行き）」で制御するためのCSSプロパティです。通常、HTMLはコードの下に書かれたものほど手前に表示されますが、z-indexを使えばそのルールを自由に上書きできます。

イメージとしては、机の上に置いた「トランプの重なり」を想像すると分かりやすいでしょう。数字が大きいカードほど一番上に重なり、数字が小さいカードは下に隠れます。この「重なりの優先順位」を数値で指定するのがz-indexの役割です。

まずは、プログラミングが初めての方でも分かりやすい簡単なサンプルで、数値による重なりの変化を確認してみましょう。

<style>
    .card-container {
        position: relative;
        height: 200px;
    }
    .base-card {
        width: 150px;
        height: 100px;
        position: absolute;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
    /* 青いカード：z-indexが小さいので後ろへ */
    .blue-card {
        background-color: #007bff;
        top: 20px;
        left: 20px;
        z-index: 10;
    }
    /* 赤いカード：z-indexが大きいので手前へ */
    .red-card {
        background-color: #dc3545;
        top: 60px;
        left: 60px;
        z-index: 20;
    }
</style>

<div class="card-container">
    <div class="base-card blue-card">z-index: 10</div>
    <div class="base-card red-card">z-index: 20</div>
</div>

このサンプルでは、赤いカードの数値を「20」、青いカードを「10」に設定しているため、赤いカードが上に重なっています。この数値を入れ替えるだけで、どちらを前に出すかを一瞬で制御できるのが、z-index最大のメリットです。

2. positionとは？

2. positionとは？

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

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

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

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の数字の意味

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. よくある失敗例と注意点

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

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

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

6. 実生活での例え

6. 実生活での例え

z-indexをわかりやすくイメージするために、実生活の例えを考えてみましょう。

例えば、机の上にノート、教科書、透明の下敷きを重ねる場面を想像してください。

• 下に置いたものは奥に隠れる（z-indexが小さい）。
• 上に置いたものは手前に見える（z-indexが大きい）。
• 透明の下敷きのように、上にあっても下のものが少し見えるケースもある。

このように、Webページの要素も現実世界の「重ね方」と同じように考えると理解しやすくなります。

まとめ

まとめ

Webデザインにおいて、要素を思い通りに重ね合わせる技術は、洗練されたレイアウトを作るために避けては通れないステップです。今回学習したCSSのz-indexとpositionは、まさにその核となるプロパティです。これらをマスターすることで、画像の上にテキストを載せるキャプション表現や、画面の端に常に表示されるナビゲーションメニュー、さらにはクリックした時に浮き出るモーダルウィンドウなど、モダンなウェブサイトに欠かせないギミックが自由自在に作れるようになります。

まず基本として押さえておきたいのは、z-indexは単体では動かないという点です。初心者が一番陥りやすい罠が、positionを指定せずにz-indexだけを書いて「重ならない！」と悩むパターンです。必ずposition: relative;やposition: absolute;といった「配置の基準」をセットで記述することを忘れないようにしましょう。また、数値の管理も重要です。場当たり的に「9999」や「10000」といった極端に大きな数字を使うのではなく、背景は1、コンテンツは10、固定メニューは100といった具合に、自分なりのルールを決めて管理すると、後からの修正が劇的に楽になります。

さらに応用として、「スタック文脈」という概念も頭の片隅に置いておきましょう。これは「親要素の重なり順が、子要素の重なり順を支配する」というルールです。どんなに子要素の数値を大きくしても、親要素自体が背面に設定されていれば、子要素がそれを突き抜けて前に出ることはできません。この仕組みを理解していれば、複雑なレイアウトで「なぜか重ならない」というトラブルに直面しても、冷静に原因を特定できるようになります。

実践的な重ね合わせのサンプルコード

ここでは、よく使われる「画像の上に文字を重ねる」というカードデザインを再現してみましょう。親要素にposition: relative;を指定し、その中のテキストにposition: absolute;を適用するのが王道のパターンです。

<style>
.card-container {
	position: relative;
	width: 300px;
	height: 200px;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}
.card-text {
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: #ffffff;
	font-weight: bold;
	z-index: 2;
}
</style>

<div class="card-container">
<img src="/img/sample150-100.jpg" alt="サンプル画像" class="card-image">
<div class="card-overlay"></div>
<div class="card-text">美しい風景のデザイン</div>
</div>

上記のコードでは、黒い半透明の膜（overlay）をz-index: 1に、テキストをz-index: 2に設定することで、画像の上で文字がはっきりと読めるように工夫しています。こうした階層構造を意識することが、読みやすいWebサイト制作の第一歩となります。

最後に、z-indexの数値は負の値（マイナス）も設定可能ですが、使いどころには注意が必要です。要素を背景に沈めたいときには便利ですが、多用しすぎるとHTML全体の構造が見えづらくなるため、まずは正の整数で管理し、どうしても必要なときだけマイナスを使うのがスマートなコーディングのコツです。