cssで画像を重ねる方法を聞かれる機会が合ったので、ついでに記事にすることにしました。

ぱっと思いつくのが下記の2種類。これを解説できればと思います。

1. position relativeとabsoluteを使用する方法
2. marginを- にして調整する方法

position relativeとabsoluteを使用する方法

この方法は、親要素にposition: relative;、子要素にposition: absolute;を指定しスタイルを調整します。

relativeは相対、absoluteは絶対という意味で、relativeを指定した要素を基準に、absoluteの位置を決める、という感じです。

absoluteを指定した要素にtop: 0; left: 0;を指定すると、relative要素の左上、bottom: 0; right: 0;右下、、という感じで、relativeの要素を基準にして、absoluteの要素が移動します。この、top left bottom rightの数値をうまく組み合わせて、任意の場所に要素を配置することができます。

↓にcircle-✗✗-△△ というクラスを指定して四隅divタグの要素を配置した画像、富士山の画像の上に鷹の画像を配置したものを載せているので、コピペして動かして見てください。

marginに - を指定して調整する方法

marginにマイナスを指定することで、他の要素の上に任意の要素を配置することができます。

例えば、margin-leftにマイナスを指定すると、左の要素の上に、マイナスmarginを指定した要素を配置することができます。