CSS 画像(img)にテキスト(p)を重ねたい時

前提

HTMLは要素が重なることはない。しかしCSSを用いて重ねることができる.

説明画像

左側はpositionを全く使わない場合
右側はpositionを使う場合、そして下記の場合で指定している要素の場所は、ページの左側上部を起点とする

やり方

• position: relative とposition: absoluteを使用し、重なるまでの微調整はtop,bottom,right,leftを使う

コード

親要素をposition: relativeとし、重ねたい要素は、親要素の左上を起点として、重なるように場所を微調整する。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 20px;
  left: 10px;
}