CSSで画像の中にテキストを重ねて表示したい

Question

現在、トップページの作成をしているのですが、画像の中にテキストを重ねて表示したいです。

ロゴの画像はCSSでposition: absolute;で入れることができました。

しかし、top-message-boxはposition:absolute;で入れることができませんでした。

どなたか、ご教授の方よろしお願い致します。

Comments

[yambejp]

ポケモンなんてのせて著作権大丈夫ですか？

[mituro]

公開する訳ではないので大丈夫です！

[yambejp]

いやいや、ここに公開してるでしょう・・・

[mituro]

たしかにそうですね…
モザイク入れておきます

Answer 1

top: 〇px;
right 〇px;
などを使って位置を移動してみてはいかかでしょうか。

Answer 2

position: absolute を使った重ね合わせは、重ね合わせる要素の内、先にHTMLに登場する方に absolute をつけてください。
そして、重ね合わせる要素の親に relative をつけてください。

---

つまり、以下のようになります。

.main-top に relative を。
.pokemon-top に absolute を。
.top-message-box にはいらないです。

---

または、こうでもいいかと思います。

.main-top に relative を。
.top-message-box に absolute を。
.pokemon-top と .top-message-box の順番を入れ替える。

---

background-image を使う方法もあります。

Comments

[mituro]

ありがとうございます????
できました！