CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法

2024/09/19

CSS の position プロパティの使い方を覚えると、画像と画像を重ねる、画像と文字を重ねる、というのが簡単にできるようになります。

画像編集ツールで加工してもよいのですが、CSS で表現すると画像の上に表示されているテキストを検索エンジンが認識してくれるので SEO 効果が期待できる、というメリットがありますね。

それでは position:relative と position:absolute の使い方を見ていきましょう。

position プロパティの使い方基本

positon プロパティで聞いたことがあるのは「相対配置」と「絶対配置」という言葉だと思います。

何となくイメージはできるものの、検索して解説を読んでもイマイチわからず…という状態ではないでしょうか。

position プロパティで使える値をおさらいしておきましょう。

static	配置方法を指定しない
relative	相対位置への配置
absolute	絶対位置への配置
fixed	スクロールしても固定される配置
sticky	スクロールに追従して固定される配置

今回使うのは position:relative と position:absolute ですが、面倒なことは忘れてかまいません。

「画像や文字を重ねるときは relative ＋ absolute」ということだけ頭の片隅に入れておいてください。

「画像と画像を重ねる方法」「画像と文字を重ねる方法」の 2 パターンをサンプル付きでご紹介します。習うより慣れろで、コピペしていろいろ試していくうちに使いこなせるようになりますよ。

画像と画像を重ねる方法

CSS で画像と画像を重ねる方法から解説していきます。

完成形は以下のイメージ。

「月（300px × 300px）」と「ピンクのロボット」は別々の画像で、CSS で重ねています。

HTML コードの基本形

HTML の基本形はシンプルです。

<div class="relative">
  <img src="./image/base.jpg" alt="" />
  <img src="./image/point.png" alt="" class="absolute" />
</div>

親要素 <div> の中に 2 つの子要素 <img> を入れています。

class 名はお好みでつけてください。ここではわかりやすく positon の値としました。

配置場所を何も指定しないと、画像が 2 つ並ぶだけで重なりません。

ピンクのロボットに CSS の position で立ち位置を教えてあげましょう。

CSS で position を指定する

親要素 <div> に relative を指定し、子要素 <img> のうち上に重ねる画像（ここでは point.png を動かします）に absolute を指定します。

.relative {
    position: relative;
}
.absolute {
    position: absolute;
}

これで、ピンクのロボットは親要素 <div> の範囲内でしか動けなくなりました。

absolute で位置を指定する

つづいて、ピンクのロボットの位置を指定します。

absolute の位置指定は下のプロパティを使います。どれかひとつでもよいですし、複数指定してもかまいません。

top	上からの距離を指定
right	右からの距離を指定
bottom	下からの距離を指定
left	左からの距離を指定

サンプルのように右下を基準とするときは、「right」と「bottom」を指定しましょう。「右から 30px 」「下から 30px 」という指定になります。

.relative {
    position: relative;
}
.absolute {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

でも、この指定だけでは、画面幅の広いタブレットや PC だとロボットがベース画像にうまく重なりません。親要素の幅を指定していないのが原因です。

ご利用されているテーマやテンプレートで <div> に何らかの指定がされている場合があります。

親要素のサイズを指定する

親要素 <div> にベースの画像と同じ幅 300px を指定しておきましょう。以下が HTML と CSS の最終形となります。

<div class="relative">
  <img src="./image/base.jpg" alt="" />
  <img src="./image/point.png" alt="" class="absolute" />
</div>

.relative {
    position: relative;
    width: 300px;
}
.absolute {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

これで、ピンクのロボットは親要素の幅 300px 以内でしか動けなくなります。

要素を重ねるポイントは以下の 2 点です。

ベースとなる親要素に relative を指定する
重ねたい子要素に absolute を指定する

どこを変えるとどうなるのか、値をいろいろ調整して試してみてください。

画像と文字を重ねる方法

では次に、CSS で画像と文字を重ねる方法を見ていきましょう。

基本的な考え方は画像＋画像と同じで、コードの基本形はこのようになります。

<div class="relative">
  <img src="./image/base.jpg" alt="" />
  <p class="absolute">ここに重ねる文字</p>
</div>

absolute で動かす要素が <img> から <p> に変わっただけです。

このままでも使えますが、ここでは <figure> タグを使ってみたいと思います。

figure タグとは

<figure> は HTML5 から新たに追加されたタグで「図表である」という意味を持ちます。仕様を見ると “メインフローから参照されるうんたらかんたら” とあってよくわかりませんね…。

figure－HTML5タグリファレンス

あまり厳密に考えなくてよいと思いますが、要するに 記事内で使う挿絵や図に使いましょう ということですね。

<figcaption> で注釈（コメント）をつけられるので、この注釈を画像に重ねてみたいと思います。

HTML コードの基本形

コード自体はシンプルで、親要素 <figure> の中に、<img> と <figcaption> を入れます。

<figure class="relative">
  <img src="./image/base.jpg" alt="" />
  <figcaption class="absolute"><p>CSS で画像と文字を重ねることができます！</p></figcaption>
</figure>

CSS コードの基本形

CSS の配置指定も先ほどと変わらず、親要素 <figure> に relative を、画像の上に重ねる <figcaption> に absolute を指定します。

relative {
    position: relative;
}
.absolute {
    position: absolute;
}

absolute で位置を指定する

画像＋画像と同じく、注釈の位置を指定して動かしてあげましょう。

<figure> にベース画像と同じ幅 600px を指定し、<figcaption> は下から 80px の位置とします。

.relative {
    position: relative;
    width: 600px;
}
.absolute {
    position: absolute;
    bottom: 80px;
}

CSS で画像と文字を重ねることができます！

上に重ねる文字を黒背景＋白文字にする

ただ重ねただけでは文字が読みづらいので、黒背景＋白文字に装飾します。

.relative {
    position: relative;
    width: 600px;
}
.absolute {
    position: absolute;
    bottom: 80px;
    color: #fff;
    background: #000;
}

CSS で画像と文字を重ねることができます！

上に重ねる文字の背景を透過させて整える

バランスが悪いので幅を揃えて背景色は透過させてみましょう。<p> のフォントサイズや余白も調整します。

.relative {
    position: relative;
    width: 600px;
}
.absolute {
    position: absolute;
    bottom: 80px;
    color: #fff;
    background: rgba(0,0,0,.6);
    width: 100%;
    max-width: 600px;
    padding: 1em 0;
}
.absolute p {
    margin: 0;
    padding: 0 0.8em;
    font-size: 150%;
    text-align: center;
}

CSS で画像と文字を重ねることができます！

完成！