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

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

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

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

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

【記述サンプル】

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