- ベストアンサー
postion:relativeについて
postion relativeのありがたみがよくわからないのです。 absoluteは、指定した座標の位置に、要素の左上頂点がくる？となんとなくわかるのですが relativeのありがたみがわかるページ等ないでしょうか？ 調べてみたページ等では、「相対位置等」のキーワードが記述されてましたが、 いいサンプルが見つからず納得できないのです。 多分、「親要素から相対的に動かす？」というぐらいでしかわかってないのです。 どこかにいいサンプル等ないでしょうか？ よろしくお願いします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
きちんと資料を読むことから始めましょう。スタイルシートは現在のところCSS2.1がウェブ標準とみなされていますが、CSS2.1の良い邦訳はありませんので、CSS2のものになりますが、増すそれに目を通すこと。調べられたとの事で、当然目を通されていると思いますので、その場合は申し訳ありません。 9.3 配置体系（Positioning schemes） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#positioning-scheme ) から 9.8 通常フロー、浮動体、絶対配置を比較する（Comparison of normal flow, floats, and absolute positioning） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#comparison ) までが該当する部分です。 たとえば、ごく簡単な次のようなHTMLがあるとします。ここで、スタイルシート記述のコメントを参考に指定をコメントアウトしたり、コメントアウトを外してください。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み。 ソース中、タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.section div.nav{ position:absolute; top:0;left:0; text-align:center; width:100%; } div.header,div.section,div.footer{width:80%;margin:0 auto;border:solid 1px gray;} div.section div.nav ol li{display:inline-block;list-style:none;} div.section div.nav ol li{width:20%;} div.header h1,div.section>h2{margin-top:60px;} /* 色分けしておく */ div.header{background-color:aqua;} div.section{background-color:yellow;} div.footer{background-color:lime;} div.nav{background-color:fuchsia;} /* 以下のコメントアウトを外す */ /*div.section{position:relative;}*/ --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>postion:relativeについて</h2> ＿＿<p>postion relativeのありがたみがよくわからないのです。</p> ＿＿<p>absoluteは、指定した座標の位置に、要素の左上頂点がくる？となんとなくわかるのですがrelativeのありがたみがわかるページ等ないでしょうか？</p> ＿＿<p>調べてみたページ等では、「相対位置等」のキーワードが記述されてましたが、いいサンプルが見つからず納得できないのです。多分、「親要素から相対的に動かす？」というぐらいでしかわかってないのです。</p> ＿＿<p>どこかにいいサンプル等ないでしょうか？</p> ＿＿<p>よろしくお願いします。</p> ＿＿<h2>static以外がキーワードです。</h2> ＿＿<p>positionやwidth,heighなどを指定するときの基準は、static以外の直近の包含ブロックを元にします。div.section(本文)にrelativeを指定した時点で、div.nav(ナビゲーション)は、div.sectionを基準にしますから、位置もサイズもそれに従います。</p> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./">トップ</a></li> ＿＿＿＿<li><a href="./books">書籍</a></li> ＿＿＿＿<li><a href="./product">製品</a></li> ＿＿＿＿<li><a href="./profile">自己紹介</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<p>カテゴリ:[技術者向] コンピューター ＞ プログラミング ＞ Webデザイン・CSS</p> ＿</div> </body> </html>
その他の回答 (4)
- twinhourse
- ベストアンサー率45% (5/11)
私も最近感心した例を参考URLで紹介します。 この例では横並びリストが中央に来るようにする方法として、position:relative;を使用することでリストのサイズに基づく始点の位置を自動的に設定しています。ここで、ulとliでそれぞれの基準となる始点が異なっているところが、まさしくposition:relative;を使うメリットではないでしょうか。 個人的には子要素のabsoluteのために親要素に設定したりしますが、やはり絶対位置を決められない状況（可変）において相対移動をしたい場合に使うのが本来的ではないかと思います。
お礼
リンク先のアドレス確認させていただきました。 面白いサンプルで勉強になりました。 ULの左上に基準点をずらして、左に50%liを動かすなんて思いつきもしませんでした…。 ここまで来ると一つの完全なテクニックだなと思いました。 情報ありがとうございました。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
relativeの基準は「staticの位置」です。 <p>あいうえお<span style="position:relative;top:10px;">かきくけこ</span></p> marginを使って調整する人が多いと思いますけどね。 「親要素から相対的に動かす」というのは、 親要素にabsolute、relative、fixedのいずれかが指定されている時で、子要素（動かしたい要素自身）にabsolute、fixedのいずれかが指定されているときです。
お礼
情報ありがとうございます。 確認させていただきました。 ><p>あいうえお<span style="position:relative;top:10px;">かきくけこ</span></p> marginを使って調整する人が多いと思いますけどね。 確かに、この記述方法をし、ずらして表示するということも可能になるのですね。 大変参考になりました。
- dscripty
- ベストアンサー率51% (166/325)
現状 position:relative を単独で使うことは少なくて、position:absolute とセットで使うことが多くて、 position:relative をなんに使うかというと、 http://www.w3.org/TR/CSS2/visuren.html#comp-abspos の 2番目の例にあるけど、 position:absolute を適用した要素の top, right, left, bottom の基準をどの祖先要素にするかの指定につかっているよ！
お礼
情報ありがとうございます。 >position:absolute を適用した要素の top, right, left, bottom の基準をどの祖先要素にするかの指定につかっているよ！ 検証してみたいと思います。 ありがとうございました。
- cdtv328
- ベストアンサー率36% (11/30)
absolute はその親の要素が static (特に設定しない場合はこれ)の場合、ウィンドウの左上からの位置になります。 relative では、そうはなりません。 親の要素を無視して、画面内の任意の位置に設定したい場合、absolute が便利です。 逆に言えば、親要素が static でも、親要素の左上からの位置にできるのが、relative です。
補足
情報ありがとうございます。 >親の要素を無視して、画面内の任意の位置に設定したい場合、absolute が便利です。 逆に言えば、親要素が static でも、親要素の左上からの位置にできるのが、relative です。 確かに。親の要素を無視できる。と言われると、「おぉ」とはなるのですが、 実際、relativeを使用することでありがたみのわかるサンプル等をご存じないでしょうか 結構レイアウト等で出てくるみたいなのですが。 上手くサンプルを見つけれなくて…。
お礼
早速試してみたところ、とても分かりやすい例で助かりました。 リストの位置が動くのですね。 確かに、relativeのありがたみを知ることができました。 サンプルと情報ありがとうございました。