positionのrelativeとabsoluteについて

本やネットで調べても

相対位置のposition:relative;や、
絶対位置のposition:absolute;の

意味や違いが全然分かりません。
どなたかわかりやすく教えてください。
回答よろしくお願いします。

No.3 ベストアンサー 回答者： namiri_e 回答日時： 2007/02/08 23:16

日本語にすると

relative＝相対位置
absolute＝絶対位置
です。

数学の座標平面はわかりますか？
イメージは
　1　2　3　4　5　6
１┌┬┬┬┬┬
２├┼┼┼┼┼
３├┼■┼┼┼
４├┼┼┼●┼
５├┼┼┼┼┼
たとえばこんな座標で、「●」がどこにあるかというのを表現するとき、座標どおりに(5,4)と表現するのがabsolute（絶対位置）式。
一方、現在■の位置にあって、そこから(+2,+1)のような表現で位置を表すのがrelative（相対位置）です。

ですので、absoluteはその名前が示すように「絶対的な」場所を示すのでいかなるときも表示位置が変わることはありません。
一方のrelativeは、上の場合だと「■」が移動するとそれに伴って「●」の位置も動きますね？（なぜなら(+2,+1)というのは■の位置から右2つ下へ1つということですので）
…つまり「相対的な」場所を示しているといえます。

実際、パソコンのディスプレーは左上から(0,0)(0,1)…と座標が振られています。
この座標どおりの値の位置に表示をするのがabsolute（絶対位置）、
ある場所を起点に「右へ２つ、下へ３つ」の位置に表示をするのがrelative（相対位置）です。
わかりましたでしょうか？

この回答へのお礼

わかりやすい回答ありがとうございました。
やっと意味がわかりました。

お礼日時：2007/02/09 01:48

No.2 回答者： leap_day 回答日時： 2007/02/08 21:46

例として

<table border="1" width="500" height="500">
<tr><td></td></tr>
</table>
<div style="position:*****;top:0px;left:0px;width:100%;height:10px;background-color:blue;">
</div>

*****の部分を
absoluteにするとウィンドウの最上段に青のラインが引かれます
relativeにすると表の下に青のラインが引かれます

このようにabsoluteはウィンドウ全体(フレーム内にページが組み込まれていたらフレーム全体)からみてどの位置にあるか・・・ということで
relativeはそのソースが書かれた位置(本来書表示されるべき位置)から見てどの位置にあるかということです

またrelative属性を持たせた中にabsolute指定してやることもできます(これは過去に質問があった)
<div style="position:relative;top:100px;left:50px;width:800px;height:500px;background-color:pink;">
<div style="position:absolute;bottom:0px;left:0px;width:100%;height:10px;background-color:blue;">
</div></div>
これはrelative属性を持たせた800*500のピンクの背景図の一番下に青のラインが引かれます

この回答へのお礼

わかりやすい回答ありがとうございました。
やっと意味がわかりました。

お礼日時：2007/02/09 01:48

No.1 回答者： noname#39970 回答日時： 2007/02/08 19:50

relative

本来表示される位置からどれくらいの位置にあるのか

absolute
画面(というかブラウザのHTMLが表示されるウィンドウ(フレーム)内)のどの位置にあるのか

というような感じの事が手元の本に書いてある

この回答へのお礼

回答ありがとうございました。

お礼日時：2007/02/09 01:47