Blog

【CSS】要素に画像を重ねる方法(position)

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

 

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

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

 

 

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

 

 

【html】

【css】

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

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

 

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

 

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

【css】

 

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

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

【css】

 

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

 

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

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

 

 

 

_

タグ:css,html

2020.11.26