画像の上に文字を重ねたいのにできない原因と解決方法を解説します。そもそも画像の上に文字を重ねる方法を知らないかたは下記をご覧ください。html・CSSで画像の上に文字を真ん中に重ねる方法(レスポンシブ対応)CSSで画像の上に文字を重ねて中央や左下に置く方法を解説します。レスポンシブ対応です。【原因1】親要素にposition:relativeを指定していないpositionを使ってimgにテキストを重ねようとしている場合注意です。テキストを囲っているhtmlタグにposition:absoluteをつけるまではいいと思います。そのままでは動きません。その親要素に「position:relative」を指定しましょう。この親要素を基準にleftやtopで位置調整ができます。その他、positionの使い方に問題がないか確認しましょう。positionが効かない原因と解決方法positionは自由に場所を指定でき、非常に便利なCSSです。ルールが多く思った通りになかなかいかないこともよくあります。positionが効かない原因と解決方法を説明します。この記事を読むCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【原因2】画像にもposition:absoluteを指定しているposition:absoluteを指定するのはテキストを囲っているhtmlタグだけです。imgにもposition:absoluteを指定してしまうと親要素の高さが0になったり、画像の位置がおかしなことになります。imgにpositionの指定は必要ありません。【原因3】親要素と画像のサイズが違う親要素に「position:relative」を指定してテキストをleftやtopで動かすことになるのですが、このときの横幅や高さの基準は親要素です。imgではありません。親要素と画像のサイズが違うと思った位置に調整できません。親要素と画像のサイズを同じにする必要があります。親要素に枠線か背景色を指定して範囲が見えるようにしてから調整してみてください。調整後は枠線か背景色を元に戻しましょう。下記は親要素と画像のサイズが違うため、テキストの位置が画像に重なっていません。親要素側で範囲を定めて、imgの幅を親要素に合わせる方法です。<div>テキスト</div></div>方法2.親要素に「width:fit-content」、imgに任意のwidth指定imgで横幅を決めて、親要素の幅を子要素に合わせる方法です。親要素がdivなどのブロック要素の場合、何もしないと横幅がいっぱいになります。親要素を子要素の幅に合わせましょう。この記事を読む【原因4】画像の下やテキストの周りに隙間がある上記の例を見ていて気付いたかと思いますが、imgの下に隙間があります。この隙間はimgに「display:block」を指定すると消えます。<div>テキスト</div></div>ほかにも画像、テキスト、親要素にmarginやpaddingなどでいらない隙間ができていないか確認しましょう。以上、画像の上に文字を重ねたいのにできない原因と解決方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。