CSS3

要素の重なり方

まずは要素の重なり方を見てみます。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;
}

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

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

これが重なりの仕様ですが、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を指定しています。こうすると次のように順番が入れ替わります。

つまり手前から、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番目が一番手前に表示されます。