z-index

CSSプロパティ「z-index」の解説とサンプル。

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

z-index

ボックスを重ねて表示する際の順序を指定するプロパティ。

topbottomleftrightの指定により、ボックスを重ねて表示させる際、その順序を指定する。

positionで「static」以外の値が指定されている場合に適用される。

数値で指定 0が一番下になり、数値が大きくなるほど上に重ねられる。

使用例

サンプル(A)

[CSSの記述]

.sampleImg { position:relative; z-index:0; }
.sampleA { background:#9ce; position:relative; top:-50px; z-index:1; }

[HTMLの記述]

<img alt="" src="hogehoge.gif" class="sampleImg" />
<p class="sampleA">テキストテキストテキスト</p>

[ブラウザ上の表示]

z-index:1が、z-index:0の上に重なる