配置方法してするpositionの相対位値。

positionの相対位置の意味がわかりません。

position:relative;
top:30px;
left:50px;

とした場合。
どこからの距離を言っているのでしょうか？

position:absolute;
top:30px;
left:40px;
にすると、画面の上から３０ピクセル、左から４０ピクセルの位置ですよね？

これを　position:relative;にすると、どこからどこまでの距離なのかがわからないのです。

よろしくお願いします。

また、HTMLなどによく出てくる「相対」という言葉がいまいちわかりません。
もちろん「絶対」という言葉もわからないのですが・・・。

No.2 回答者： ORUKA1951 回答日時： 2012/01/23 15:57

常に仕様書を確認する癖をつけましょう。

REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　→9.3 配置体系（Positioning schemes） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
relative
　ボックスの位置はまず通常フローにて計算され（この計算で得られた位置を通常位置と呼ぼう）、その通常位置から相対的に配置される。 なお、あるボックスBが相対配置される場合、それに後行するボックスの位置は、Bが相対配置されていないかのように計算される。
absolute
　ボックスの位置（と場合によっては大きさ）は'left'、'right'、'top'、'bottom'という4つのプロパティで指定される。 これらのプロパティは、ボックスの位置を包含ブロックからの距離として示すものである。 絶対配置のボックスは通常フローには従わないので、兄弟要素のレイアウトに影響を与えない。 また、絶対配置のボックスにはマージンがあるが、これは他のどのマージンとも相殺しない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル/9.3 配置体系（Positioning schemes）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )］より

　relativeで自身を移動させることは少ないと思いますが、次のabsoluteが位置判断するとき、その親のコンテナブロックがstaic以外のときは、その親コンテナブロックの左上が基準点になります。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
'position'が'static'以外の値を取る時、その要素は位置指定されている（positioned）と言う。 位置指定された要素は、位置指定されたボックスを生成する。 位置指定されたボックスは以下の4つのプロパティに従ってレイアウトされる:
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル/9.3.2 ボックスの位置を指定する（Box offsets: 'top', 'right', 'bottom', 'left'）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )］より


＞(absoluteでは)画面の上から３０ピクセル、左から４０ピクセルの位置ですよね？
　違います。その祖先にstatic以外のコンテナがあれば、そこが基準になります。

＞これを　position:relative;にすると、
　本来(static)のときに置かれるはずだった場所が基準になります。だから相対です。


　いずれにしても、それらの値の意味や関連する他のプロパティとの関係を含めて、9.3 配置体系（Positioning schemes） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )全体を読まないと理解できないと思います。
　★一部の情報だけでは完璧に説明するのは無理です。とにかく仕様書に目を通してください。

No.1 回答者： taka451213 回答日時： 2012/01/23 15:57

こんにちは。

ちょっと勘違い？

＞position:absolute;
top:30px;
left:40px;
にすると、画面の上から３０ピクセル、左から４０ピクセルの位置ですよね？

親要素がstaticの場合のみです。
例えば親要素がrelativeとかってなってたら、親要素の左上が基準。

んで、rlativeは「本来（staticで）表示される場所」から相対的に指定します。