z-index
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を利用することで、複数の画像を重ね合わせることができます。
関連リンク
- プロパティリファレンス:top
- プロパティリファレンス:bottom
- プロパティリファレンス:left
- プロパティリファレンス:right
- プロパティリファレンス:position
- プロパティリファレンス:overflow
- プロパティリファレンス:display
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-10-25