【CSS】要素の重ね方を解説します【画像の上にテキストを重ねる】

こんにちは朱夏です。

今回はCSSで要素を重ねる方法を解説します。

朱夏

画像の上にテキストが書いてあるサイトがあるけど、どうやるんだろう？

こんな問題を抱えてる人向けになります。

結論から書くと、CSSの「position: absolute;」と「position: relative;」を使います。
使い方はこの後詳しく解説していきます。

それではいきましょう。

[もくじ]
position: absolute;とは
position: relative;とは
具体例
あとがき

position: absolute;とは

position: absolute;とは、その要素を絶対位置に配置するものです。
右上を起点として、top、leftなどの座標を指定して配置します。

書き方としてはこんな感じです。

.sample {
    position: absolute;
    top: 50%; /* 縦位置 */
    left: 10%; /* 横位置 */
}

ここで1つ問題が出てきます。
それは「どこの右上が起点なのか」です。

結論から言うと以下の2パターンがあります。

ウィンドウ全体の右上
position: static;以外のpositionプロパティが指定された親要素

position: static;は「指定なし」という意味です。
CSSでpositionプロパティを指定していない要素と同じ配置になります。

サイトトップで表示を重ねる場合は、position: absolute;だけで重ねる事が可能です。
では、position: relative;がなぜ必要なのか、次の項で解説したいと思います。

position: relative;とは

position: relative;とは、要素を相対位置に配置するものです。
position: static;の時と同じ配置場所を起点として、top、leftなどの座標を指定して配置します。
本来の使い方では、要素の表示位置を調整するのに使用するのですが、今回の場合は用途が違います。

何に使うかというと、「position: static;以外のpositionプロパティ」として指定するのに使います。
これによって、重ねる要素の起点となる親要素を指定する事が出来ます。

コードで書くとこんな感じです。

HTML

<div class="test-box">
   <img class="img-test" src="img/sample.png" alt="テスト画像">
   <h1 class="sample-text">サンプルテキスト</h1>
</div>

CSS

.test-box {
    position: relative;
    width: 500px;
    height: 500px;
}

.sample-text {
    position: absolute;
    top: 50%;
    left: 10%;
}

重ねたい要素である<h1>タグ内のテキストにposition: absolute;を指定しています。
その親要素となる<div>タグにposition: relative;を指定して、親要素と認識させています。

ところで、何故親要素に指定するものはposition: relative;なのでしょうか？
CSSのルールでは、position: static;以外であれば、何でもいいはずです。

結論から言うと、実際はルール通り何でも構いません。
しかし、position: relative;が一番汎用性が高いから使われています。

positionプロパティの他の値を見てみましょう。

position: static;
position: absolute;
position: relative;
position: fixed;

以上の4つになります。

position: static;

これは親要素として認識させる事が出来ないので今回の目的には合っていません。

position: absolute;

この指定方法だと重ねたい要素の親要素も、更に上位の要素と重なってしまいます。
意図的に使うのでなければあまり使わないと思います。

position: relative;

座標を指定しなければ、position: static;と同じ位置に要素を表示してくれます。
要素を重ねる場合の親要素の指定はこれが一般的。

position: fixed;

この値はposition: absolute;と同じで絶対位置に配置するためのものです。
更に言うと、この値を指定された要素はスクロールに関係なくウィンドウ内で一を固定されます。
なので、この値を指定した要素に別の要素を重ねようとすると、重ねた要素も固定されます。

上記の様な特性から、position: relative;を使うのが一般的になっています。

具体例

では、具体例として、画像の上にテキストを重ねたコードを紹介します。
といっても、前の項で紹介したコードとほぼ同じです。

HTML

<div class="test-box">
   <img class="img-test" src="img/S__23322627.png" alt="テスト画像">
   <h1 class="sample-text">サンプルテキスト</h1>
</div>

CSS

.test-box {
    position: relative;
}

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

.sample-text {
    color: gray;
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
}

実行結果

こんな感じです。
今回は縦横500px幅の画像にテキストを重ねました。
この方法で位置合わせをした要素は、要素の左上を基準に指定するため、中央合わせがし難いのが難点です。

こういった場合の中央揃えの方法は、また別の機会にやりたいと思います。

あとがき

というわけで、今回は要素の重ね方について解説してみました。
最後に今回のまとめです。

重ねたい要素にposition: absolute;
起点にしたい親要素にposition: relative;

慣れないうちは、プロパティを指定すると予想外の位置に配置されてしまい見失ってしまうこともありますが、今回の仕組みの部分が理解できれば、思い通りに重ねる事が出来る筈です。

余談ですが、要素を重ねた場合に「重なる順番」を制御するz-indexというプロパティがありますが、この話はまたの機会にします。

今回は以上です。
次回もよろしくお願いします。