背景画像の上に文字を重ねて表示する方法

こんにちは。
背景画像の上に文字を重ねるという初歩的なことができなかったので、忘れないように記載しておきます。
relativeとかabsoluteとかなんとなくわかるけど、きちんとした理解ができてないんですよね。
HTMLもCSSももっとちゃんと理解できたらおもしろいんだろーなと思いつつも、いつもGoogleさんに聞きながら場当たり的に解決している状態です。

背景画像を用意します。

サンプル画像（ふきだし）

今回はWindowsのペイントでさくっと準備したものを使ってみます。
こんな感じのざっくりしたふきだしをつくってみました。
サイズは300px×300pxです。

この画像を「fukidashi」という名前でアップロードしてブログに挿入します。

CSSに変更を加えます。

WordPressの
外観 > テーマの編集 > style.css
の一番下に以下を挿入します。

「box1」は背景画像に設定するプロパティ、
「moji1」は重ねる文字に設定するプロパティになります。

box1の設定について

box1の方のpositionを「relative」に設定します。
relative:相対位置を意味します。
詳しくはgoogleで「relative absolute」と検索すればいろいろ出てきますので、解説はそちらをご覧ください。

widthは300pxとしていますが、これは今回の画像「fukidashi」のサイズを指定しています。

moji1の設定について

moji1の方のpositionを「absolute」に設定します。
absolute:絶対位置を意味します。
widthは220pxとしていますが、これは指定の画像のどの範囲に文字をおさめたいかに合わせて、調整します。

位置はtopとleftのプロパティで指定しています。
これも実際にアップしながら位置を微調整していきましょう。

投稿記事の設定

以下のように記載します。