CSSのz-indexの使い方を完全解説！初心者でもわかる要素の重なり順

z-indexで要素の重なり順を制御する方法

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

生徒

「先生、Webページの要素が重なったとき、どちらを前に出すかを決める方法ってありますか？」

先生

「はい、それにはCSSのz-indexプロパティを使います。要素の重なり順をコントロールできるんです。」

生徒

「z-indexって聞いたことありますが、難しそうです。初心者でも使えますか？」

先生

「もちろんです。順序の数字を指定するだけで簡単に調整できます。まずは基本ルールと実例から見てみましょう。」

1. z-indexとは何か？

z-indexは、要素の前後関係、つまり重なり順を決めるCSSプロパティです。Webページ上では要素は平面的に並んでいるように見えますが、実際には重なりがあり、どれを前面に出すかはz-indexで管理します。

数字が大きいほど前面に表示され、小さいほど背面になります。例えば、z-index: 10はz-index: 1より手前に表示されます。

2. z-indexを使うための条件

z-indexを使うにはpositionプロパティが必要です。positionにrelative、absolute、fixed、stickyのいずれかを設定した要素に対して有効です。static（デフォルトの配置）のままでは効きません。

3. relativeとz-indexの組み合わせ

relativeは要素自身の元の位置を基準に動かす配置方法ですが、z-indexと組み合わせると前後関係を調整できます。


<style>
    .box1 {
        position: relative;
        z-index: 1;
        width: 150px;
        height: 150px;
        background-color: #0d6efd;
        color: white;
        text-align: center;
        line-height: 150px;
        margin-bottom: 20px;
    }
    .box2 {
        position: relative;
        z-index: 2;
        width: 150px;
        height: 150px;
        background-color: #198754;
        color: white;
        text-align: center;
        line-height: 150px;
        margin-top: -80px;
    }
</style>

<div class="box1">z-index 1</div>
<div class="box2">z-index 2</div>

ブラウザ表示

box2がbox1より数字が大きいため、前面に表示されます。

4. absoluteやfixedとz-indexの組み合わせ

absoluteやfixedで配置された要素も、z-indexで重なり順を調整できます。absoluteは親要素を基準に位置を決めるので、親の上で前後関係を作れます。


<style>
    .parent {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: #f8f9fa;
    }
    .absolute1 {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 100px;
        height: 100px;
        background-color: #ffc107;
        z-index: 1;
    }
    .absolute2 {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: #dc3545;
        z-index: 2;
    }
</style>

<div class="parent">
    <div class="absolute1"></div>
    <div class="absolute2"></div>
</div>

ブラウザ表示

赤いabsolute2が黄色のabsolute1より前面に表示されます。