relativeとabsoluteで、ちゃちゃっと簡単に画像を重ねる

画像の上に画像を重ねて配置する方法です。

下(後ろ側)に配置される画像やボックスにposition:relativeを指定。上(重ねる側)にposition:absoluteと(topやleftなどの)親要素からの位置を指定です。

以前は下の画像を背景にしてしまえば簡単済んだことなんですが、イマドキはスマホのことを考えなけれりゃならないので、背景画像のサイズの指定で悩んじゃったりします。

そういうときはこの方法で解決できます。

Naifix さんのサイトで解説されています。ありがとう♬

position:relativeとposition:absoluteで画像や文字を重ねてみよう