画像を表示する・上級編

画像の配置を指定する

上のような3枚の画像を用意し、以下のようにCSS記述しました。
（CSSの記述についてはCSSを記述するを参照）

さらに、クラス「photo1〜3」を設定します。

<p class="photo1〜3"><img src="画像ファイル"></p>

以上の設定で、配置した画像がこちら→画像配置1

「position:値」
static…画像を標準位置に配置。
relative…相対的な位置で指定（画像を標準の位置から位置指定）。
absolute…絶対的な位置で指定。（ウィンドウの左上から位置指定）

「top:値」上位置を指定する。「bottom:値」下位置を指定。「right:値」右位置から指定する。「left:値」左位置を指定。

画像の重ね順を指定する

.photoz1{
position:absolute;
top:300px;
left:20px;
z-index:3
}
.photoz2{
position:absolute;
top:470px;
left:240px;
z-index:2
}
.photo3{
position:absolute;
top:670px;
left:460px;
z-index:1
}

以上の設定で、配置した画像がこちら→画像配置2

左の画像から手前に配置される設定です。

「z-index:値」
数値が大きいほど前面に配置。

戻る