CSS

on Note

z-index 要素の重なりの順番を指定する

要素同士で重なりが生じた時、z-indexプロパティで重なりの順番を指定することができます。

例えば、position: absolute;position: fixed;を使って要素の表示位置を指定することがあります。そしてこれらを指定した要素は、他の部分と重なった状態になります。

この時、優先して表示させたい要素が他の要素の下敷きになってしまっては問題です。こういった場合に、要素同士の重なりの順番に関して指定するプロパティが z-indexです。

ここでは z-indexプロパティの書き方を説明するとともに、要素の重なりに関しても触れています。

要素の重なり方

まずは要素の重なり方を見てみます。z-indexは指定せずに重なりだけを見ます。

HTMLを次のようにマークアップした例で確認します。

<div class="sample">
    <p class="no_1">1番目</p>
    <p class="no_2">2番目</p>
    <p class="no_3">3番目</p>
</div>

div要素にposition: relative;を指定し、p要素にposition: absolute;を指定しています。これで各 p要素は重なり合います。重なりが確認できるように p要素の位置を調整しています。

CSSは次のように指定しています。

.sample {
    position: relative;
}
.sample .no_1 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #faa;
}
.sample .no_2 {
    position: absolute;
    top: 1em;
    left: 1em;
    background-color: #ffa;
}
.sample .no_3 {
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #aaf;
}

このようにマークアップすると次のように表示されます。

1番目

2番目

3番目

このように要素間で重なりが生じた場合、重なり合った要素の中で、後に配置した要素ほど上(手前)に表示されます。つまり先に配置した要素が下に潜り込む形になります。

これが重なりの仕様ですが、z-indexプロパティを使うことで、この重なりの順番を変えることができます。

z-indexで重なりの順番を変える

では次のように、CSSコードの中に z-indexプロパティを記述します。書式は「z-index: 値;」です。

.sample {
    position: relative;
}
.sample .no_1 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #faa;
    z-index: 30;
}
.sample .no_2 {
    position: absolute;
    top: 1em;
    left: 1em;
    background-color: #ffa;
    z-index: 20;
}
.sample .no_3 {
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #aaf;
    z-index: 10;
}

1番目は、z-indexの値に30、2番目は20、3番目は10を指定しています。こうすると次のように順番が入れ替わります。

1番目

2番目

3番目

つまり手前から、z-indexプロパティの値が大きい順に表示されるということです。尚、数字をこの通りに指定する必要はなく、手前に表示させたい要素ほど大きい数字にすれば良いだけです。

例えば、とにかく2番目を一番手前に出すのであれば、次のように2番目にだけ z-indexプロパティを指定すれば良いです。

.sample {
    position: relative;
}
.sample .no_1 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #faa;
}
.sample .no_2 {
    position: absolute;
    top: 1em;
    left: 1em;
    background-color: #ffa;
    z-index: 99;
}
.sample .no_3 {
    position: absolute;
    top: 2em;
    left: 2em;
    background-color: #aaf;
}

2番目にだけ z-indexプロパティを指定し、値は適当な数字にしました。これで、次のように2番目が一番手前に表示されます。

1番目

2番目

3番目

z-indexで指定できる値

z-indexプロパティの値は整数で指定します。マイナスの値での指定も可能ですが、小数は使えません。

初期値は「auto」で、「0」を指定した場合と同じです。もしマイナスの値を指定した場合、他の要素の背面に回ることになります。他の要素は、z-indexでの「0」位置にあると言えます。

値に「auto」を指定した場合、通常と同様、HTMLでの記述順で重なります。

z-indexが使えるのは?

z-indexプロパティが使えるケースは、要素にpositionプロパティを指定した場合、かつ、positionプロパティの値を「relative」「absolute」「fixed」 のいずれかにした場合だけです。

positionプロパティを指定しても、値が「static」では z-indexプロパティの効果はありません。

まとめ

z-indexプロパティは、要素の重なりの順番の指定に使います。値は整数で指定し、数字が大きいほど前面に表示されます。

z-indexプロパティが使えるのは、positionプロパティで「relative」「absolute」「fixed」 のいずれかを指定した場合だけです。