z-index

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

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

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

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

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

[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の上に重なる

CSSレイアウト実践講座カテゴリ