■ 画像を好きな位置に表示する（レイアウト枠（レイヤー））

ページのレイアウトを行ううえで、表示位置を自由に決めたいと思うことがあります。
周りの文字や画像、表（テーブル）などの枠にとらわれず、自分の思う位置に画像を表示できないのでしょうか？

それを解決する方法がひとつだけあります。
それはレイアウト枠（レイヤー）を使用する方法です。
この機能（スタイル）は、IBMホームページビルダーでは「どこでも配置モード」で使用されています。
また、ソフトやメーカーによっては「レイヤー」とか「コンテナ」と呼ばれています。

タグで言いますと、「DIV」タグに「position:absolute」のスタイル属性を指定し、「top」、「left」でその表示位置を指定します。
ただ、この方法は欠点もあります。

表示する位置はページの左上隅からの位置関係で指定することになるため、中央揃えや右寄せという指定ができません。
また、ページ上浮いたような状態になるため、他の文字や画像、表（テーブル）の間に入れたり、それらと同時にずらすということもできません。

通常のコンテンツなら閲覧する側（訪問者）の画面の大きさに合わせて伸縮することができますが、この方法で同じ事をするにはかなり厄介な方法（JavascriptやDHTML）を使用せざるを得なくなります。
ですから、この方法を使用するには画面デザインやレイアウトなどを充分検討し、他の方法でどうしても実現できない時のみ使う方が賢明でしょう。
安易な気持ちで使用することはお勧めできません。

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

【記述サンプル】

<div style="position: absolute; top: （上からの絶対位置）; left: （左からの絶対位置）; width: （レイアウト枠（レイヤー）の幅）; height: （レイアウト枠（レイヤー）の高さ）; z-index: （画像の表示順序）"> （表示したい画像） </div>

「z-index」はレイアウト枠（レイヤー）同士が重なった時の表示順序で、数字が大きくなるほど、より上に表示されます。

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

【記述サンプル】

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