解決済み

positionのrelativeとabsoluteについて

  • すぐに回答を!
  • 質問No.2735517
  • 閲覧数308
  • ありがとう数22
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 78% (11/14)

本やネットで調べても

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

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

質問者が選んだベストアンサー

  • 回答No.3

ベストアンサー率 37% (37/98)

日本語にすると
relative=相対位置
absolute=絶対位置
です。

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

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

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

お礼率 78% (11/14)

わかりやすい回答ありがとうございました。
やっと意味がわかりました。
投稿日時 - 2007-02-09 01:48:42

その他の回答 (全2件)

  • 回答No.2

ベストアンサー率 60% (338/561)

例として

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

お礼率 78% (11/14)

わかりやすい回答ありがとうございました。
やっと意味がわかりました。
投稿日時 - 2007-02-09 01:48:22
  • 回答No.1

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

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

というような感じの事が手元の本に書いてある
お礼コメント
3ks1oeew34

お礼率 78% (11/14)

回答ありがとうございました。
投稿日時 - 2007-02-09 01:47:58
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ