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

生徒

「Webサイトで画像の上に文字を載せたり、パネルを重ねたりしたいのですが、どうすればいいですか？」

先生

「CSSの『Gridレイアウト』や『Position』、そして『z-index』という機能を使うと、要素を自由に重ねることができますよ。」

生徒

「要素を重ねるのって難しそうですね。どちらを使えばいいんでしょうか？」

先生

「目的によって使い分けますが、最近はGridを使うと非常にシンプルに書けます。まずは基本的な仕組みから解説しますね！」

1. 要素が重なる仕組みとレイヤーの考え方

Webページ上の要素（画像やテキストの箱）は、通常は上から下、左から右へと順番に並んでいきます。これを専門用語で「通常のフロー」と呼びます。しかし、デザインによっては、写真の上にボタンを置いたり、背景の上に説明文を重ねたりしたいことがあります。

これを実現するには、要素を「レイヤー（層）」として考える必要があります。画像編集ソフトやアニメのセル画のように、透明なシートを何枚も重ねていくイメージです。手前に表示したいもの、奥に配置したいものを指定することで、奥行きのある立体的なレイアウトが作れるようになります。この奥行きの順番を管理するのが「z-index」というプロパティです。

2. Positionプロパティを使った伝統的な重ね方

最も古くから使われている方法が position を使う方法です。親要素（土台となる箱）に position: relative; を指定し、動かしたい子要素に position: absolute; を指定します。これにより、子要素は親要素の中を自由に飛び回れるようになり、他の要素を無視して重なることが可能になります。

例えば、写真の右上に「新着」というラベルを重ねたい時などに便利です。しかし、この方法は要素を浮かせている状態なので、全体の高さを計算し直す必要があったりと、少しコツが必要です。


<style>
    .container-pos {
        position: relative;
        width: 150px;
        height: 100px;
    }
    .base-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .label-abs {
        position: absolute;
        top: 10px;
        left: 10px;
        background: red;
        color: white;
        padding: 5px;
    }
</style>

<div class="container-pos">
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="base-image">
    <div class="label-abs">新着</div>
</div>

ブラウザ表示

3. Gridレイアウトで子要素を重ねる新しい手法

最近主流になりつつあるのが、 display: grid; を使った方法です。グリッドレイアウトは本来、マス目を作ってきれいに並べるためのものですが、実は同じマス目（セル）の中に複数の要素を配置すると、自動的に重なるという性質があります。

この方法の最大のメリットは、 position: absolute; のように要素を浮かせる必要がないため、レイアウトが崩れにくく、中央揃えなども簡単に行える点です。親要素を1マスだけのグリッドに設定し、その中に画像と文字を入れるだけで、きれいに重なります。

4. グリッドで画像の上に文字を中央配置する

具体的にグリッドで重ねるコードを見てみましょう。 grid-area: 1 / 1; という指定を子要素に書くことで、「1行目の1列目」という同じ場所に全員が集まるように指示します。これで、後から書いた要素が上に重なっていきます。


<style>
    .grid-stack {
        display: grid;
        width: 300px;
        height: 200px;
    }
    .grid-item {
        grid-area: 1 / 1; /* 同じマスに配置 */
    }
    .image-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .text-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        background: rgba(0,0,0,0.4); /* 半透明の黒 */
    }
</style>

<div class="grid-stack">
    <img src="/img/sample150-100.jpg" alt="背景" class="grid-item image-bg">
    <div class="grid-item text-overlay">画像の上に重なる文字</div>
</div>

ブラウザ表示

5. 重なりの順番を制御するz-indexの使い方

複数の要素を重ねたとき、「どっちを一番手前に持ってくるか」を数字で指定するのが z-index プロパティです。通常、HTMLに書かれた順番が後のものほど手前に来ますが、このプロパティを使えば順番を自由に入れ替えることができます。

注意点として、 z-index は static（初期値）以外の position（relative, absoluteなど）が指定されている要素、またはグリッドアイテムに対して有効です。数字が大きいほど手前（上）に表示され、マイナスの値を指定すると奥（下）に隠れます。テレビのチャンネルボタンのように、「1番より2番が強い」と覚えるとわかりやすいですよ。

6. z-indexで3つのボックスを重ねる実践

実際に3つの要素を少しずつずらして重ね、 z-index で順序を変える例を見てみましょう。背景色を分けると重なり順がはっきり確認できます。重なりを指定することで、奥行きのあるモダンなデザインが作れます。


<style>
    .stack-wrapper {
        position: relative;
        height: 150px;
    }
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }
    .box1 { background: blue; top: 0; left: 0; z-index: 3; }
    .box2 { background: green; top: 20px; left: 20px; z-index: 2; }
    .box3 { background: orange; top: 40px; left: 40px; z-index: 1; }
</style>

<div class="stack-wrapper">
    <div class="box box1">一番上(3)</div>
    <div class="box box2">真ん中(2)</div>
    <div class="box box3">一番下(1)</div>
</div>

ブラウザ表示

7. 初心者がハマりやすいスタック文脈の注意点

要素を重ねる際に多くの初心者が「z-indexを大きな数字にしたのに一番上に来ない！」というトラブルに直面します。これには「スタック文脈」というルールが関係しています。これは、ある親要素が強力な「重なりのグループ」を作ってしまうと、その中にある子要素はグループの外にいる要素を追い越せないというルールです。

例えば、親要素A（z-index: 1）の中にいる子要素が z-index: 999 だとしても、隣にある別の親要素B（z-index: 2）より手前に来ることはできません。マンションの1階の部屋の住人が、どれだけ背伸びしても2階の床を突き抜けて上にいけないのと同じです。重なりがおかしいと感じたら、一度親要素の設定を確認してみるのが解決の近道です。

8. GridとPositionの使い分けのコツ

最後に、どのような時にどちらの重ね方を使えばいいかを整理しましょう。背景画像の上にタイトルを載せるような、中心を合わせた「どっしりした重ね方」には、レイアウトが崩れにくい Grid が最適です。一方で、写真の端っこに小さなバッジを付けたり、画面の隅にボタンを固定したりする「自由な配置」には Position が向いています。

Webデザインの幅を広げるためには、この「重なり」の技術は必須です。最初は Grid で同じマスに入れる方法から試してみて、慣れてきたら z-index で細かい順序を調整してみてください。要素を自在に重ねられるようになれば、あなたの作るサイトも一気にプロのような仕上がりに近づきますよ！