スタイルシートのposition指定について

レイアウトする際に使うスタイルシートの指定で、TIMEにおいても必要不可欠であり、そして大変わかりにくいことの一つにこのpositionの指定があげられると思います。指定方法にはabsorute（絶対位置）、relative（相対位置）、fixed（固定）、normal（普通）の4つが現在あります。TIMEにおいても、レイアウトにおいても重要なのは最初の2つ、absorute（絶対位置）とrelative（相対位置）です。以下でこの２つの違いについて説明します。

◆ absoｌute（絶対位置）

この絶対位置というのは、そのページの左上の角から見て、どこにあるかということになります。絶対的な位置ということになりますから、そのページに他の内容がかかれていようがいまいが、基本的に絶対に指定した位置に表示がされます。
具体的なタグの記述例です。

となります。この場合どのような表示がされるかというと、ページの左上の角から下に200ピクセル、左に150ピクセルの位置に画像、image01.gifの左上の角がくるように表示がされるということになります。ココをクリックしてください。実際にそのように記述した際と同じ表示がされます。
ですから、この絶対位置に関してはページのソースのどこに書かれていても表示される位置は基本的に変わらないということになります。

クリックして消してください下さい

◆ relative（相対位置）

絶対位置が、ページの左上の角から見てどこにあるかということに対して、こちらは、実際に表示される位置から見てどれだけずらした位置に表示させるか？という指定になります。こちらは絶対位置とは異なり、ソースのどこにそのタグが書かれているかによって表示のされ方が変わってきます。実際の表示位置から見てどれだけ移動した位置に表示をするかを指定するわけですから当然といえば当然です。
具体的なタグの記述例です。

この場合、実際に画像が表示される位置より上にマイナス100px、右へ150ピクセルずれた位置に表示がされます。
まず、クリックしてください。するとスタイル指定をしていない時の画像が表示されます。次にクリックしてください。すると上でスタイル指定をした位置の表示に切り替わります。
つまり、このpositionの指定はおこないかたによって、絶対指定であろうと、相対指定であろうと、ページの外に追いやる（表示させない）ということもできるわけです。

クリックすると消えます

image02.gif