positionについて

Question

positionについて教えてください
box内にbox2をpositionで配置したいのですが子要素のboxに指定するpositionはrelativeとabsoluteどちらがいいですか？

また、子要素のboxにrelativeを指定した場合とabsoluteを指定した場合の表示の違いはありますか?

#box {
 position: relative;
 }
 
#box2 {
 position: relative;
 top :50px;
 left: 100px;
 width: 100px ;
 height: 100px ;
 background-color: #F90;
 }

ORUKA1951 · Accepted Answer

HTML次第・・例えば、本文中にサブ項目があるような場合　

見出し

本文

項目

　 HTML4.01だと　　

本文

項目

　のようになっているとします。・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ・HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) 　この時に relativeは、それに含まれるブロックに対しての位置や配置の基準とされます。言い換えると、それに含まれる要素はstatic以外の直近の先祖であるブロックの内辺を参照します。 [HTML5] section{ width:80%;margin:0 auto; min-height:300px; background-color:yellow; position:relative; /* この有無で次の位置が変わる */ } section nav{ position:absolute; top:0;left:0;height:100%;width:20%; background-color:lime; } section section, section h2{ margin:0 0 0 20%;width:auto; min-height:0; } [HTML4] div.section{ width:80%;margin:0 auto; background-color:yellow; min-height:300px; position:relative; /* この有無で次の位置が変わる */ } div.section div.nav{ position:absolute; top:0;left:0;height:100%;width:20%; background-color:lime; } div.section div.section, div.section h2{ margin:0 0 0 20%;width:auto; min-height:0; } absoluteだと、その要素は存在しなかったように扱われて続く要素が配置されます。 relativeだと、元の位置に存在したままのように後続の要素が扱われます。 staticではないですから、それに含まれる要素はその位置やサイズを基準にします。　どれを使うかは、どのようにデザインするかで決定します。HTMLには本来文書構造しか書かれていないので、スタイルシートでデザインを変える時にどちらを使うかを都度考慮すれば良いです。複数の代替スタイルシートを使用する場合とか、印刷用スタイルシートと違うとか・・　上記のnav(ナビゲーション)の配置の場合、sectionの位置を基準にしたければsectionにrelativeを指定しますし、ウィンドを基準にする場合は指定しない(staticにする)。 ※余計なことかもしれませんが、#box1とかのclass,id名じゃ、スタイルシートを書くときや将来のメンテナンスで困りますよ。section nav{}だと、HTML見なくてもsection(本文)中のnav(ナビゲーション)だと分かるので、HTML見なくてもスタイルシートかけますし、スタイルシートに関係なく本文の記事の修正ができる。 ※positionの扱いはここで説明しきれる量ではありません。仕様書を確認しましょう。詳しく正確にすべて書かれています。

play_with_you · Answer

#1です。
提示したURLのサイトは見てくれてますか？

＞親box内で自由に配置したいです
「自由に配置」するだけならどちらでもできます。「本来の位置」を基準にするのがrelativeで「親要素の左上」を基準にするのがabsoluteですから、状況に応じて使い分けてください。
難しいなら、リンク先で言う「relative(absolute)とabsoluteの組み合わせ」パターンを使うといいです。外側のボックスの左上が基準点になるので調整がしやすいと思います。

＞実際にやってみたら、位置は同じように見えましたが
＞relativeとabsoluteでは位置が違ってくるかもしれないと思い
それはたまたまです。これもリンク先サイトにありますが、relativeでは「本来配置されるスペース」がキープされます。だから親要素や前後の要素のスタイルによっては同じになりません。

繰り返しになりますが、どちらを使用するかの基準は「あなたがどうしたいか」です。
上記で説明した「基準点」「本来のスペース」の違いを理解したうえで、想定どおりのレイアウトになるほうを使ってください。

＞どうゆうIDの書き方がわかりやすいでしょうか？ 
×ゆう
○いう
#2の方とは違い、本来はこんなIDじゃないというのは分かってます。
ただ、文章内で「box」という言葉を使うのなら例のソースで「box」というIDを使うと紛らわしいよ、ということです。
「out」「in」にするとか、それこそ「box1」「box2」でもいいので、紛らわしくなければなんでもかまいません。

ちなみに、#2の回答は長いしごちゃごちゃ理屈っぽいけど、言ってることは正しいので、ちゃんと読んだほうがいいですよ。

play_with_you · Answer

「子要素のbox」ってのは#box2の事ですか？紛らわしいのでそういうIDはたとえ例でもやめてほしかった。

＞どちらがいいですか？
「どうしたいか」によるのでそれだけでは答えられません。
＞表示の違いはありますか?
positionプロパティ以外をどうするかによるのでそれだけでは答えられません。基本的には違いは当然あります。
http://www.acky.info/tips/css/00013.html

positionについて

HTML次第・・

#1です。

「子要素のbox」ってのは#box2の事ですか？紛らわしいのでそういうIDはたとえ例でもやめてほしかった。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング