どうも7noteです。画像をテキストや文字に重ねたいときに使える3つの方法を解説

①背景画像にする

背景画像を指定してしまえば、画像の上に文字や別の画像を設置できます。
ただし、背景画像を前面に持ってくることはできません。

index.html

<div class="box"><img src="sample01.jpg" alt=""></div>

style.css

.box {
  background: url(sample02.jpg); /* 背景画像に緑の画像を指定 */
  width: 800px;   /* 画像にあわせて適当な幅を指定 */
  padding: 20px;  /* 適当な余白を指定 */
}

②position指定で重ねる

position指定を使うことで自由にコンテンツの位置や前後の重なり順を指定することができます。
ただしその分コンテンツの高さが無くなるので乱用しすぎるとレイアウト崩れの原因にもなります。

index.html

<div class="box">
  <img src="sample01.jpg" alt="" class="img_01">
  <img src="sample02.jpg" alt="" class="img_02">
</div>

style.css

.box {
  width: 500px;       /* 適当な幅を指定 */
  height: 300px;      /* 適当な高さを指定 */
  position: relative; /* 基準位置とする */
}

/* 共通するCSS */
.box img {
  width: 300px;       /* 適当な幅を指定 */
  position: absolute; /* 相対位置に指定 */
}

.box .img_01 {
  /* 左上に固定 */
  top: 0;
  left: 0;
}

.box .img_02 {
  /* 右下に固定 */
  bottom: 0;
  right: 0;
}

③ネガティブマージンで重ねる

この方法では無理やりマイナスの値のmarginを指定することで、ほかの要素の上に画像やテキストを重ねる事ができます。
ガッツリ重ねるというよりは、一部が被る程度の時に使えます。

index.html

<div class="img_01"><img src="sample01.jpg" alt=""></div>
<div class="img_02"><img src="sample02.jpg" alt=""></div>

style.css

img {
  width: 300px; /* 適当な幅を指定。※解説用なのでなくてもOK */
}

.img_02 {
  margin-top: -100px; /* 上方向にネガティブマージンを取る */
  opacity: .5;        /* ※解説用にかぶっているところをわかりやすくしているだけ */
}