CSSで重ねて表示するカードUIを作る方法！positionとz-indexを初心者向け解説

重ねて表示するカードUIを作る方法（position + z-index）

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

生徒

「先生、Webサイトでカードを重ねて表示したいんですけど、どうやって作るんですか？」

先生

「CSSのpositionとz-indexを使うと簡単にカードを重ねられます。初心者でもすぐに理解できます。」

生徒

「positionとz-indexって何ですか？」

先生

「positionは要素の配置方法を指定するプロパティで、absoluteやrelativeを使います。z-indexは重なり順を決める数字です。数字が大きいほど前に表示されます。」

生徒

「なるほど。実際に重ねてみたいです！」

1. positionとz-indexでカードを重ねる基本

重ねて表示するカードUIを作るには、まずカードにposition: absoluteを指定します。そして、topやleftで位置を調整し、z-indexで重なり順を指定します。z-indexの値が大きいカードほど手前に表示されます。背景にあるカードや前に重なるカードを簡単に作れるので、モーダルやギャラリー、プロフィールカードなどでよく使われます。

2. 重ねて表示するカードのサンプルコード


<style>
    .card-container {
        position: relative;
        width: 400px;
        height: 250px;
        margin: 50px auto;
        background-color: #f8f9fa;
    }
    .card {
        position: absolute;
        width: 200px;
        height: 120px;
        border-radius: 10px;
        color: white;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        transition: transform 0.3s;
    }
    .card1 {
        top: 20px;
        left: 20px;
        background-color: #0d6efd;
        z-index: 1;
    }
    .card2 {
        top: 40px;
        left: 60px;
        background-color: #198754;
        z-index: 2;
    }
    .card3 {
        top: 60px;
        left: 100px;
        background-color: #dc3545;
        z-index: 3;
    }
    .card:hover {
        transform: scale(1.05);
        z-index: 10;
    }
</style>

<div class="card-container">
    <div class="card card1">カード1</div>
    <div class="card card2">カード2</div>
    <div class="card card3">カード3</div>
</div>

ブラウザ表示

このサンプルでは、3枚のカードが少しずつずれて重なり、hoverすると拡大して手前に表示されます。z-indexで重なり順を自由に操作できるため、直感的なカードUIを作れます。

3. z-indexの基本ルール

z-indexは整数を指定でき、値が大きいほど前面に表示されます。ただし、positionがrelative、absolute、fixed、stickyでないと効果がありません。また、親要素のz-indexやスタッキングコンテキストも影響するため、複雑なレイアウトでは順序を確認しながら設定することが大切です。