CSSのpositionとz-indexの関係性を完全ガイド！初心者でもわかる重なり順の仕組み

positionとの関係性を理解してz-indexを正しく使う方法

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

生徒

「CSSで要素を重ねようとしたのですが、z-indexを指定しても画像がうまく上に表示されません…」

先生

「それはよくあるつまずきですね。実はz-indexは、positionプロパティが正しく設定されていないと効かない仕組みになっているんです。」

生徒

「positionとz-indexにはそんな深い関係があるんですね！どうやって書けばいいか教えてください！」

先生

「それでは、基本から順番に分かりやすく見ていきましょう！」

1. CSSのpositionプロパティとは？基本の仕組みを解説

ウェブサイトを作る際、文字や画像を思い通りの場所に配置するために使うのがposition（ポジション）プロパティです。初心者の方にとっては少し難しく感じるかもしれませんが、要は「要素の立ち位置を決める魔法の道具」だと思ってください。

通常、HTMLで書いた要素は上から下へ、左から右へと順番に並んでいきます。しかし、positionを使うことで、その通常の流れから外れて、画面の好きな場所にピタッと配置することが可能になります。まずは、このpositionがどのような役割を持っているのか、基本中の基本からしっかり理解していきましょう。

2. z-indexが効かない原因とpositionの関係性

ウェブデザインをしていると、「手前に出したい要素があるのに、後ろに隠れてしまう」という悩みにぶつかります。そんなときに登場するのがz-index（ゼットインデックス）です。これは、要素の重なり順（奥行き）を指定するためのものです。

しかし、初心者の方が一番最初につまずくのが、「z-indexを書いたのに、なぜか全く効かない」という現象です。ここで重要なのが、z-indexは単体では動かないというルールです。z-indexが正しく機能するためには、その要素に対して必ずpositionプロパティ（static以外）が指定されている必要があります。このルールを知らないと、何時間コードを見直しても重なり順が変わりません。

3. positionの種類とそれぞれの特徴を徹底比較

z-indexを使いこなすためには、positionの種類を正しく理解することが近道です。positionにはいくつかの値がありますが、主によく使われるものを順番に見ていきましょう。それぞれの特徴を掴むことで、レイアウトの自由度が劇的に広がります。

まず、何も指定しない初期状態がstatic（スタティック）です。これは通常の配置ルールに従うもので、z-indexは効きません。次に、親要素を基準にするrelative（リラティブ）、画面全体や親要素の枠を基準にするabsolute（アブソリュート）、画面に固定するfixed（フィックスド）などがあります。これらの違いをしっかり押さえておきましょう。

4. 実際にコードを書いて重なり順を調整してみよう

それでは、実際にHTMLとCSSを書いて、要素を重ね合わせてみましょう。今回は、赤いボックスと青いボックスを用意し、青いボックスを上に重ねるコードを作成します。初心者の方でもすぐに試せるように、シンプルな記述にしています。


<style>
    .box-red {
        position: relative;
        width: 150px;
        height: 100px;
        background-color: #ffcccc;
        z-index: 1;
    }
    .box-blue {
        position: relative;
        width: 150px;
        height: 100px;
        background-color: #cceeff;
        z-index: 2;
        margin-top: -50px;
        margin-left: 50px;
    }
</style>

<div class="box-red">赤いボックス</div>
<div class="box-blue">青いボックス</div>

ブラウザ表示

上記のコードでは、両方にposition: relative;を指定した上で、青いボックスのz-indexを「2」、赤いボックスを「1」に設定しています。数値が大きい方が手前に表示されるため、青いボックスが上に重なります。

5. absoluteとz-indexを使った実践的なレイアウト

実際のウェブ制作の現場では、画像の上に文字を重ねたり、バッジをアイコンの右上に出したりするケースがよくあります。こうした場面で大活躍するのが、position: absolute;とz-indexの組み合わせです。

基準となる親要素にposition: relative;を指定し、中に配置する子要素にposition: absolute;を指定することで、親要素の中の自由な位置に要素を配置できます。以下のサンプルコードで具体的な動きを確認してみましょう。


<style>
    .card-wrapper {
        position: relative;
        width: 200px;
        height: 150px;
        background-color: #f0f0f0;
    }
    .badge-icon {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #ff4d4d;
        color: white;
        padding: 5px 10px;
        z-index: 10;
    }
</style>

<div class="card-wrapper">
    <div class="badge-icon">新着</div>
    <p>カードのコンテンツです</p>
</div>

ブラウザ表示

このように、親要素を基準にして子要素を浮かせることで、デザインの幅が一気に広がります。z-indexを高く設定しておけば、他の要素に埋もれる心配もありません。

6. 重なり順のルールとスタッキングコンテキストの罠

z-indexを使っていると、「数字をすごく大きくしたのに、なぜか他の要素の下に隠れてしまう」という不思議な現象に遭遇することがあります。これは、CSSのスタッキングコンテキスト（重なり合う階層のグループ）という仕組みが原因です。

親要素が特定の条件を満たしている場合、その中にある子要素のz-indexは、親要素全体のグループの中でしか比較されなくなります。つまり、いくら子要素のz-indexを「9999」のように大きくしても、親要素のグループの優先度が低ければ、別のグループの要素より下になってしまうのです。この仕組みを理解しておくと、レイアウト崩れが起きたときにも冷静に対処できるようになります。

7. トラブルシューティング！z-indexが効かないときの確認ポイント

コーディングをしていて意図通りに重なり順が変わらないときは、いくつかのチェックポイントを順番に確認していくのが解決への近道です。初心者の方が陥りがちなミスをあらかじめ知っておくことで、スムーズにエラーを解消できるようになります。

まず最初に確認すべきなのは、対象の要素にpositionが指定されているかどうかです。staticのままになっていないか必ずチェックしましょう。次に、親要素にopacityやtransformなどが指定されていないか確認します。これらも新しいスタッキングコンテキストを生成する原因になります。以下のコードでシンプルな確認用パターンを見ておきましょう。


<style>
    .target-box {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        background-color: #e6e6e6;
        padding: 20px;
    }
</style>

<div class="target-box">
    <p>正しくz-indexが効いている要素です</p>
</div>

ブラウザ表示

このように、基本のルールさえ守っていれば、z-indexは確実に意図した通りの重なり順を実現してくれます。焦らず一つずつ設定を確認していきましょう。

2026年最新スキルアップ・実践セミナー