要素の重ねあわせ順を指定する。

positionのプロパティの値にrelative、absoluteを設定した場合に
要素同士が重なったとき表示する順番を指定するプロパティについてです。

要素の重ねあわせ順を指定するプロパティには、z-indexのプロパティを使います。

値には、整数を指定します。
数字が大きいほど指定した要素が前面に表示されます。
実際の表示を見たほうが分かりやすいと思うので早速サンプルについてです。

CSSを次のように記述します。

p{
width:400px;
height:300px;
background-color:#66ffff
}
img.positionrelative{
position:relative;
top:100px;
left:50px;
z-index:2;
}
img.positionabsolute{
position:relative;
z-index:1;
}

HTMLは次のように記述します。
<p>
<img class="positionrelative" src="images/image.gif" alt="海中のイメージ" width="200px" height="150px">
<img class="positionabsolute" src="images/backgroundimage.gif" alt="背景のイメージ" width="100px" height="100px">
</p>

z-indexのサンプルです。表示すると表示順が入れ替わることがわかると思います。

まとめ

• positionのプロパティの値にrelative、absoluteを設定した場合に、要素の重ねあわせ順を指定する場合、z-indexのプロパティを使う。


• z-indexの値には、整数を設定し、値が大きいほど前面に表示される。

• ホーム
• ページトップ
• 同カテゴリの他エントリーを読む
• RSS