Z-Index の基本

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 59/76。

CSSにおいて、z-indexプロパティは、配置された要素（static以外のpositionを持つ要素）の重なり順を制御します。要素が重なる場合、z-indexによってどの要素が手前に表示され、どの要素が背後に表示されるかが決まります。z-indexの値が高い要素は、値が低い要素よりも手前に重ねられます。

z-index プロパティを使用するための基本的な構文は次のとおりです。

selector {
    position: relative; /* または absolute、fixed、sticky */
    z-index: value;
}

position: relative; (または absolute、fixed、または sticky): z-index が効果を持つためには、要素が配置されている必要があります。

value: 重なり順を表す整数値です。値が大きい要素は、値が小さい要素よりも手前に重なります。値は正、負、またはゼロを指定できます。

例えば：

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

この例では、.box1 と .box2 はどちらも絶対配置されています。.box1 の方が高い z-index 値を持っているため、これらが重なる際、.box1 は .box2 の前面に重ねられます。

チャレンジ

簡単

3つの重なり合う <div> 要素（クラス名：box1、box2、box3）を含むHTMLドキュメントがあります。あなたのタスクは、z-index プロパティを使用して、これらの要素の重なり順を制御することです。以下の手順に従ってください。

クラス box1 を持つ <div> 要素をターゲットにするCSSルールを記述します。その position プロパティを absolute に、top を 0 に、left を 0 に、そして z-index を 3 に設定してください。
クラス box2 を持つ <div> 要素をターゲットにするCSSルールを記述します。その position プロパティを absolute に、top を 20px に、left を 20px に、そして z-index を 2 に設定してください。
クラス box3 を持つ <div> 要素をターゲットにするCSSルールを記述します。その position プロパティを absolute に、top を 40px に、left を 40px に、そして z-index を 1 に設定してください。

z-index の値によって、box1 が一番上に、box3 が一番下になるように重なり順がどのように変化するかを確認してください。

チートシート

z-index プロパティは、配置された要素の重なり順を制御します。z-index の値が大きい要素は、値が小さい要素よりも手前に表示されます。

基本構文:

selector {
    position: relative; /* または absolute, fixed, sticky */
    z-index: value;
}

要件:

要素の position は static 以外である必要があります
値は正、負、またはゼロを指定できます
値が大きいほど、値が小さい要素よりも手前に重なります

例:

.box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 2;
}

.box2 {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 1;
}

自分で試してみよう

<html>
<head>
    <title>Z-Index Basics</title>
    <style>
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box2 {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: lightgreen;
        }
        .box3 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="box1">Box 1</div>
    <div class="box2">Box 2</div>
    <div class="box3">Box 3</div>
</body>
</html>