【CSS】要素に画像を重ねる方法（position）

こんにちは。WEB担当のEです！

今日は、下記の画像のように「position:relative」と「position:absolute」を使用して

要素（または画像）に画像を重ねる方法をお話したいと思います。

またこんな感じで重ねる画像をはみ出させて表示する事も可能です。

【html】

<div class="sample-box">
<img src="画像URL" class="sample-img">
</div>

</div>

【css】

.sample-box {
	position: relative;
	background-color: #4682b4;
	height: 300px; /*要素の高さ*/
	width: 400px; /*要素の幅*/
}
.sample-img {
	position: absolute;
}

.sample-box {

position: relative;

background-color: #4682b4;

height: 300px; /*要素の高さ*/

width: 400px; /*要素の幅*/

}

.sample-img {

position: absolute;

}

このままだと、アザラシの画像が左上に表示されたかと思います。

このアザラシの画像に対して、下記の位置指定をしてあげます。

top	上からの距離を指定
left	左からの距離を指定
right	右からの距離を指定
bottom	下からの距離を指定

右下にアザラシの画像を表示させたい時は、「right」と「bottom」を使用します。

【css】

.sample-box {
	position: relative;
	background-color: #4682b4;
	height: 300px;
	width: 400px;
}
.sample-img {
	position: absolute;
	right: 10px; /*右から10px*/
	bottom: 10px; /*下からから10px*/
}

.sample-box {

position: relative;

background-color: #4682b4;

height: 300px;

width: 400px;

}

.sample-img {

position: absolute;

right: 10px; /*右から10px*/

bottom: 10px; /*下からから10px*/

}

また、要素に対してはみ出して表示させたい時は、「̠-（マイナス）」で距離を指定します。

今回は左上に表示させます。

【css】

.sample-box {
	position: relative;
	background-color: #4682b4;
	height: 300px;
	width: 400px;
}
.sample-img {
	position: absolute;
	top: -10px;
	left: -10px
}

.sample-box {

position: relative;

background-color: #4682b4;

height: 300px;

width: 400px;

}

.sample-img {

position: absolute;

top: -10px;

left: -10px

}

要素に対して-10px分はみ出して表示されるようになりました。

今回は要素に対して画像を重ねましたが、画像に画像を重ねたり、画像に文字を重ねたりも可能です。

この基本型を参考に色々アレンジして使用してみてください。

タグ：css,html

2020.11.26

Blog