htmlとcssで吹き出しの中に文字を置きたいのですが、 html 〈div class bb〉 〈

htmlとcssで吹き出しの中に文字を置きたいのですが、
html
〈div class bb〉
〈img class ○○ src@@ alt##〉
〈p class ☆☆〉✖︎✖︎✖︎✖︎〈/p〉
〈/div〉

css
○○｛position:relative;｝
☆☆｛position :absolute
top:0
｝

で、下の図のようになってしまいます。
望む位置に訂正するにはどうすればいいですか？
ちなみにtopの数値をどうしても文字の位置は変わらないんです。

質問者からの補足コメント

• imgのクラスが吹き出しの部分です。

    補足日時：2023/02/05 10:01

• 回答ありがとうございます。
  セミコロンはつけております。
  おっしゃる通り、「bb」の部分にrelativeを書いたのですが、やはりこのままです‥

    補足日時：2023/02/10 14:34

No.3 回答者： wanderer1 回答日時： 2023/02/10 20:14

＞おっしゃる通り、「bb」の部分にrelativeを書いたのですが、やはりこのままです‥

だとすれば、他の要因が絡んでいますので、ソースを見ないことにはなんとも言えないですよね。

あと、どんな検証方法を採用されているかわかりませんが、
Webブラウザの開発者モードを使って粗探しをするのと、
ブラウザのキャッシュを空にすることを繰り返せば、
何らかの答えにたどり着く可能性は高くなります。

Webブラウザの開発者モードとは、たとえばGoogle Chromeならデベロッパーツールを使います。
ソースに直接手が加えられるので、なにがまずいのかを確認しながら修正の糸口を知ることができます。

No.2 回答者： wanderer1 回答日時： 2023/02/05 12:07

＞imgのクラスが吹き出しの部分です。

そりゃわかってるんですけれどもね。
フキダシは「背景画像」として処理した方がシンプルで、一般的には使い回ししやすいと思います。レスポンシブの指定も楽ですし。

それはさておき、imgの左下にpが表示されるとしたら、それは記述ミスではないかと思います。

css
○○｛position:relative;｝
☆☆｛position :absolute ←セミコロン抜けてます
top:0
｝

矢印の部分にセミコロンを入れると、imgの左下にはpが表示されないと思います。

だけど、<div class bb>の枠をすっとばして、ページの一番左上にpが表示されると思います。なので

css
.bb｛position:relative;｝
○○｛position:relative;｝
☆☆｛position :absolute;
top:0
｝

にすると〈div class bb〉の左上にpが配置されると思います。

あとはpの位置調整してやればいいんじゃないでしょうか。

No.1 回答者： wanderer1 回答日時： 2023/02/05 05:18

imgがフキダシだとしたら、imgタグではなくて、

〈div class bb〉のbackground-imageとして処理した方がいいんじゃないでしょうか？