【html/CSS】画像の上に文字を重ねたいのにできない原因と解決方法

「画像の上に文字を重ねたいのにうまくできない！」

画像の上に文字を重ねたいのにできない原因と解決方法を解説します。

そもそも画像の上に文字を重ねる方法を知らないかたは下記をご覧ください。

【原因1】親要素にposition:relativeを指定していない

positionを使ってimgにテキストを重ねようとしている場合注意です。

テキストを囲っているhtmlタグにposition:absoluteをつけるまではいいと思います。

ただしそのままでは動きません。

その親要素に「position:relative」を指定しましょう。

この親要素を基準にleftやtopで位置調整ができます。

その他、positionの使い方に問題がないか確認しましょう。

【原因2】画像にもposition:absoluteを指定している

position:absoluteを指定するのはテキストを囲っているhtmlタグだけです。

imgにもposition:absoluteを指定してしまうと親要素の高さが0になったり、画像の位置がおかしなことになります。

imgにpositionの指定は必要ありません。

【原因3】親要素と画像のサイズが違う

親要素に「position:relative」を指定してテキストをleftやtopで動かすことになるのですが、このときの横幅や高さの基準は親要素です。

imgではありません。

親要素と画像のサイズが違うと思った位置に調整できません。

親要素と画像のサイズを同じにする必要があります。

親要素に枠線か背景色を指定して範囲が見えるようにしてから調整してみてください。

調整後は枠線か背景色を元に戻しましょう。

下記は親要素と画像のサイズが違うため、テキストの位置が画像に重なっていません。

<style>
.example{
    border: 1px solid #999;
    position: relative;
}
.example div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: red;
}
</style>
<div class="example">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <div>テキスト</div>
</div>

方法1.親要素に任意のwidth指定、imgに「width:100%」を指定

親要素側で範囲を定めて、imgの幅を親要素に合わせる方法です。

<style>
.example2{
    /*コレ*/width: 200px;
    border: 1px solid #999;
    position: relative;
}
.example2 img{
    /*コレ*/width: 100%;
}
.example2 div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: red;
}
</style>
<div class="example2">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <div>テキスト</div>
</div>

方法2.親要素に「width:fit-content」、imgに任意のwidth指定

imgで横幅を決めて、親要素の幅を子要素に合わせる方法です。

<style>
.example3{
    /*コレ*/width: fit-content;
    border: 1px solid #999;
    position: relative;
}
.example3 img{
    /*コレ*/width: 200px;
}
.example3 div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: red;
}
</style>
<div class="example3">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <div>テキスト</div>
</div>

【原因4】画像の下やテキストの周りに隙間がある

上記の例を見ていて気付いたかと思いますが、imgの下に隙間があります。

この隙間はimgに「display:block」を指定すると消えます。

<style>
.example4{
    width: fit-content;
    border: 1px solid #999;
    position: relative;
}
.example4 img{
    /*コレ*/display: block;
    width: 200px;
}
.example4 div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: red;
}
</style>
<div class="example4">
    <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">
    <div>テキスト</div>
</div>

ほかにも画像、テキスト、親要素にmarginやpaddingなどでいらない隙間ができていないか確認しましょう。

【まとめ】画像の上に文字が重ならない原因

• 【原因1】親要素にposition:relativeを指定していない
  →親要素にposition:relativeを指定する
• 【原因2】画像にもposition:absoluteを指定している
  →画像にはpositionを指定しない
• 【原因3】親要素と画像のサイズが違う
  方法1.親要素に任意のwidth指定、imgに「width:100%」を指定
  方法2.親要素に「width:fit-content」、imgに任意のwidth指定
• 【原因4】画像の下やテキストの周りに隙間がある
  →imgに「display:block」

以上、画像の上に文字を重ねたいのにできない原因と解決方法でした。