画像の上に自由に文字を配置する
こちら 「画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About」 を参考にまとめてみます。
実現方法のポイント
具体例（サンプル）
以下のように、ホワイトボードの画像の上に、文字を配置することを考えてみます。
ホワイトボードの内側に表示する文章です。これは画像ではなくテキストです。
このように複数箇所に表示することも可能です。
このサンプルのソースは、以下のようなものです。
<div style="position: relative;"> <img src="http://f.hatena.ne.jp/images/fotolife/t/takami_hiroki/20101020/20101020111731.gif" width="500" height="500" alt="ホワイトボード"><br> <div style="position: absolute; top: 50px; left: 70px; width: 335px;"> ホワイトボードの内側に表示する文章です。これは画像ではなくテキストです。 </div> <div style="position: absolute; top: 150px; left: 150px; width: 200px;"> このように複数箇所に表示することも可能です。 </div> </div>
解説１．一番外側のdiv要素について
内側のdiv要素（ホワイトボードの中の文字）に対する基準ボックスです。
そのために、このdiv要素のpositionプロパティの値は、relative にしています。移動距離は指定していないので、本来表示されるべき位置のまま表示されます。
解説２．内側のdiv要素について
このdiv要素のpositionプロパティの値は、absolute にしています。
absolute は「positionプロパティがstatic以外の最も近いボックス」からの表示位置を指定することになります。 その「最も近いボックス」とは、ここでは「position: relative;」を指定している「一番外側のdiv要素」となります。
まとめ
今回のこの例は「文字＝あるオブジェクト」、「画像の上＝任意の好きな場所」と捉えると、「あるオブジェクトを任意の好きな位置に配置したい」という要求に対する解決策を考えたことになります。
それには、「position:absoluteには必ず「親」がいて、その親からの絶対位置を指定する」という特性が利用できるわけです。
任意の場所には「position:relative;」を指定することで親に任命し、あるオブジェクトに「position:absolute」を指定することで子として扱います。その結果、任意の場所（親）に対して、あるオブジェクト（子）の位置を好きに指定できるようになるというわけです。
どんなときに使うと効果的か
- 写真を並べた上にタイトル文字を置きたい（※今回の例）
- float以外で複数のボックスを並べたい
- レイアウト的には上の方にしたいが、重要度は低いのでHTMLでは下の方に置きたい*3
参考URL グラフィックデザイナーのためのCSSレイアウトメモTIPS「position : absoluteについて」
