positionのrelativeとabsoluteについて

質問

本やネットで調べても

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

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

回答No.3

namiri_e · ベストアンサー

日本語にすると
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（相対位置）です。
わかりましたでしょうか？

お礼

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

回答No.2

leap_day

例として

<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のピンクの背景図の一番下に青のラインが引かれます

お礼

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

回答No.1

noname#39970

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

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

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

お礼

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