z-index/重なる順序

z-indexプロパティを使うと表示順序を指定出来ます。

説明

 z-indexプロパティはボックスが重なった時、一番後ろのボックスを前に表示する等、表示順序を変更出来ます。

z-index説明

 尚、z-indexはpositionがstatic以外に指定されている時だけ有効です。

構文

 z-indexプロパティの構文は以下の通りです。

z-index: auto、又は数字;

 autoはデフォルトで自動です。先に記述したボックスの上に後に記述したボックスが表示されます。

 数字は順番です。0から1、2、3等と指定し、ボックスが重なった時、小さい方が下になります。

利用例

 z-index利用例です。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

 まずはpositionでrelativeを指定し、ボックスを3つ作って重ならせます。

.t1 {
position: absolute;
height:30px;
}

.t2 {
position: absolute;
margin-left: 20px;
height: 30px;
}

.t3 {
position: absolute;
margin-left: 40px;
height: 30px;
}

<div class="t1">ボックスt1</div>
<div class="t2">ボックスt2</div>
<div class="t3">ボックスt3</div>

 上記を表示すると以下になります。尚、分かり易いように背景を追加しています。

ボックスt1
ボックスt2
ボックスt3

 これがボックスが重なった時のデフォルトの表示で、後で記述したボックスt3で上書きされています。

 z-indeを追加して重なる順番を逆にしてみます。

.t1 {
position: absolute;
height: 30px;
z-index: 2;
}

.t2 {
position: absolute;
margin-left: 20px;
height: 30px;
z-index: 1;
}

.t3 {
position: absolute;
margin-left: 40px;
height: 30px;
z-index: 0;
}

 HTMLは同じで上記を表示すると以下になります。

ボックスt1
ボックスt2
ボックスt3

 このように、ボックスt1が一番上になって順番が変わります。

JavaScriptを利用した例

 以下のように各ボックスを切り替えるJavaScriptも出来ます。

答え:100
答え:200
答え:300

 上記では各ボタンをクリックする度にdocument.getElementById('t1').style.zIndex = x;等でz-indexの値を変更し、表示順序を変えています。

関連ページ

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

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

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)