■ 画像と文字を重ね合わせる（画像と文字の合成）

画像や文字を好きな位置に表示する（レイアウト枠（レイヤー））で、解説したものをそれぞれ重ねて表示してみましょう。
ただ、この方法は欠点もありますので安易な気持ちで使用することはお勧めできません。

詳しくは、「CSSサンプル（カスケーディングスタイルシート）」−「画像を好きな位置に表示する（レイアウト枠（レイヤー））」や「文字を好きな位置に表示する（レイアウト枠（レイヤー））」をご参照下さい。
また、「HTMLサンプル」−「画像の重ね合わせ（合成）について」や「CSSサンプル（カスケーディングスタイルシート）」−「画像の重ね合わせ」もご参照下さい。

※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。

次のような記述で、このページの左上に「テストサンプルの表示」と「郵便ポスト」を表示しました。

【記述サンプル】

<div style="position:absolute; top:120px; left:30px; width:40px; height:40px; z-index:1">
<img src="../../images/exp/ico005.gif" alt="郵便ポスト" width="32" height="32">
</div>

<div style="position:absolute; top:100px; left:20px; width:100px; height:40px; z-index:2">
テストサンプルの表示
</div>