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

質問

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

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

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

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

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

よろしくお願いします。

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

回答No.2

ORUKA1951

常に仕様書を確認する癖をつけましょう。
REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )
　→9.3 配置体系（Positioning schemes） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#positioning-scheme )

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

　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/visuren.html#positioning-scheme )］より

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

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

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

回答No.1

taka451213

こんにちは。

ちょっと勘違い？

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

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

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