【初心者向け】画像の上に文字を重ねる方法｜positionをやさしく解説します

Webサイトを作っていると
「画像の上に見出しを乗せたい！」
「ボタンを少しだけズラしたい！」
「要素を重ねてオシャレにしたい！」
という場面がよくあります。

そんな時に必ず使うのが position（ポジション） というCSSのプロパティです。

この記事では、
初心者でもスッと分かるように、できるだけやさしく
画像と文字を重ねる方法を紹介します。

---

position って何？初心者向けに超シンプル解説

position は、要素の場所を指定するためのCSS です。

特に覚えておきたいのはこの2つ。

• position: relative（親）
• position: absolute（子）

この2つはセットで使うと覚えておくと簡単！

位置を決める時は
top・left・bottom・right を使って「どこに置くか」を指定します。

---

ステップ①：HTMLで親と子を用意する

<div class="parent">
  <img src="sample.jpg" alt="" class="bg-img">
  <div class="box1">見出しテキスト</div>
</div>

• parent → 画像の入った箱（親）
• box1 → 上に重ねたいテキスト（子）

---

ステップ②：親要素に position: relative; をつける

.parent {
  width: 300px;
  height: 200px;
  position: relative;
}

relative をつける理由

子要素（absolute）を
この親の中で位置調整できるようにするためです。

これがないと、画面全体を基準に動いちゃいます。

---

ステップ③：子要素に position: absolute; をつける

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
}

absolute をつける意味

absolute は
「自由に動けるモード」 のようなもの。

そして位置の指定も忘れずに！

• 上からの距離：top
• 左からの距離：left

などを必ずセットで指定します。

---

ステップ④：実際の仕上がりイメージ

• 画像を背景に置く
• その上にテキスト（box1）が
  　「上から50px」「左から50px」に配置される

という状態になります。

たったこれだけで、
画像の上に文字が載った、見栄えの良いデザインが完成します！

---

コピペOK！完成コードまとめ

HTML

<div class="parent">
  <img src="sample.jpg" alt="" class="bg-img">
  <div class="box1">見出しテキスト</div>
</div>

CSS

.parent {
  width: 300px;
  height: 200px;
  position: relative;
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box1 {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
}

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

---

初心者向けポイントまとめ

• 親には relative
• 子には absolute
• absolute のときは位置指定（top / left など）を必ずセット
• 画像の上に文字を置くと一気にデザインが良くなる
• position の基本を覚えると応用がたくさん効く！

その他関連記事はこちら→Programming Notes