z-index

Home>CSS>プロパティリファレンス>z-index

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

z-indexプロパティの役割

z-indexプロパティはボックスの重なり順を指定するプロパティです。

z-indexプロパティは、positionプロパティで位置指定されている(static以外の値を指定されている)要素に対してのみ有効です。

z-indexプロパティに設定できる値

auto 親要素と同じ階層に表示される。初期値。
整数値 大きい数字ほど上に表示される。

 

z-indexプロパティの使い方

.p1{
position:relative;
z-index:2;
}
.p2{
position:relative;
z-index:1;
}



下に
表示される

上に表示される

上記の例では、赤いボックスと青いボックスを重ねています。赤のボックスのz-indexを2にして、青のボックスのz-indexを1にすると、青いボックスが下になり、その上に赤いボックスが重なります。

z-indexを利用することで、複数の画像を重ね合わせることができます。

関連リンク

よく読まれている記事

UpDate:2010-10-25