自由な場所（座標）に表示させるサンプル
それでは最後にサンプルとして、ページの右上に次のロゴを表示させる方法をご紹介致します。
HTMLファイルの中身は次のようになります。
※灰色の部分は、どう書き換えても構わない部分です。
<html> <head> <title>サンプル</title> </head> <body> <h1>All About JAPON</h1>
<h2>中身中身中身</h2>
<p>
中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身
</p>
<p>
中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身中身
</p> <div style="position: absolute; top: 12px; right: 10px;"> <img src="logo.gif" width="207" height="61" alt="ロゴ"> </div> <p>
© Copyright 2003 All About JAPON. All Rights Reserved.
</p> </body> </html>
「右上に表示」するよう記述していますので、ウインドウサイズを変化させても、必ず右上に表示されていることがお分かり頂けると思います。
ここでは「右上」に表示させたいわけですから、位置指定に使ったプロパティは top と right です。
「 top: 12px; right: 10px; 」で、上端から12ピクセル・右端から10ピクセルの位置に表示させることになります。
また、緑色の部分は、ロゴ画像を表示させる部分です。画像ファイル名が logo.gif となっていますが、ここは用意した画像ファイル名に書き換えて下さい。 width（横幅）・height（高さ）の値も同様です。
おわりに
さて、ドロップダウンメニューを作るシリーズ第2回として、今回は、座標を指定して自由な場所に表示させる方法をご紹介致しました。 次回は、第1回と第2回の内容を元にして、簡単なドロップダウンメニューを作ってみたいと思います。
【次回記事】
