- ベストアンサー
postion: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/2281)
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を使用することでありがたみのわかるサンプル等をご存じないでしょうか 結構レイアウト等で出てくるみたいなのですが。 上手くサンプルを見つけれなくて…。
関連するQ&A
- positionのrelativeとabsoluteについて
本やネットで調べても 相対位置のposition:relative;や、 絶対位置のposition:absolute;の 意味や違いが全然分かりません。 どなたかわかりやすく教えてください。 回答よろしくお願いします。
- ベストアンサー
- HTML
- relativeについて
子がabsolute指定されるとその親はrelative指定にしなければいけない みたいですがどうしてでしょうか？ 例が悪いですが下記のHPに載ってるCSSです。 http://www.stylish-style.com/csstec/basic/g-photo-guard.html (実際にはこのCSSは閲覧者とって不便ため使わないです。) 自分でタグをそのまま書いてみてIEでみたのですがrelativeがない 場合とある場合との違いがわかりませんでした。
- ベストアンサー
- CSS
- positionについて下記の認識で正しいでしょう
positionについて下記の認識で正しいでしょうか？ ・relativeは動かしたい要素自体にpositionプロパティをつける。親要素にpositionプロパティはいらない。 { position: relative; top:100px; left:10px } ・absolute; 絶対。 親要素の背景 { width: 100%; position: relative; background: url(../img01.jpg) no-repeat left top; } 子要素の動かしたい要素 .box.box02 p{ position: absolute; left: 0; top: 0; } ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ・absoluteは、親要素も何も関係なしにブラウザ上の上から何PX左から何PXと指定して、要素を配置でできる。 ただし例外として、 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。 親ボックスにpositionプロパティのstatic（初期値）以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。（個人的に単独で使う事はほぼないです） ・relativeは、親要素から、何PX左から何PXと指定して、要素を配置でできる 補足また、まとめて指定する方法はマージンのようにないのでしょうか？
- ベストアンサー
- CSS
- 絶対位置と相対位置
娘の親に対する位置を決めたいと思い、娘のほうに相対位置を記述しましたが、思ったとおりになりませんでした。 そこで自分でも調べてみると、どこかに「親のほうを絶対位置にしなさい（座標は不要）」と書いてありました。 理由がわかりません。 相対位置は何かに相対＝比較しての位置なので、ひとつ上の親だと納得できるのですが、なぜ親を絶対位置にするのですか。しかも座標は不要って・・・ 絶対位置は「絶対」の内容からして宇宙や地球ではなくとも UA の表示部分の左上かなと思っているのですが、なぜ座標が不要ということより、娘を親に相対させるためにそもそもなぜ親に絶対位置を設定しないといけないのかわかりません。親に対する相対なら、親がどこにいてもよいはずです。 お願いします。
- 締切済み
- HTML
- ＣＳＳについて 初心者です。positionについて
勉強中です。 すいません。教えてください。 「親要素を基準に子要素の位置を指定するには、 親要素に position: relative を指定し (absoluteにする理由があるならそちらでも良い)、 子要素に position: absolute を指定すればよいと言うことになる。」 となりますが、この概念がさっぱりわかりません。 確かに、子要素の位置をposition: absoluteで配置しようとした際に、 親要素にposition: relative（しかも、値はなし）で設定しないとうまく行きませんでした。 ネットで調べても全く意味がわかりませんでした。 なぜ子要素の位置をposition: absoluteで配置しようとした際に親要素に、position: relativeをしかも値なしで設定しないと、うまくいかないのか 詳しく教えていただけないでしょうか？m(..)m
- ベストアンサー
- HTML
- css:positionの挙動について
いつもお世話になっております。 positionの挙動で詰まっています。 ・absoluteを指定すると、fixedのように振る舞う ・relativeを指定すると、ウィンドウ幅が伸縮することで位置が可変する それぞれ同じ<header>を親としています。 親にはrelativeを与えてあります。 また、ひとつはpotisionプロパティを削除すると、 他の配置してある要素の位置が変わってしまいます。 親さえ違い、私には関連性の見出せない要素です。 現象の法則性が見出せず、苦戦しております。 何卒ご教示頂けませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- CSS
- position:relative でこの後PXとか指定しない場合はどうなるのでしょうか？
position:relative 標準の位置からの指定がいるみたいに説明されていましたが。いま見ているサンプルでは、後にPXとか指定しないんです。このばあい場合はどうなるのでしょうか？
- 締切済み
- その他（インターネット・Webサービス）
- HTMLの画像の位置の指定
HTMLで、画像の位置などを決めるときに、<div align="center"></div>などを使いますが、ＣＳＳやジャバスクリプトで使用している、 position:absolute; 絶対配置 position:relative; 相対配置 position:static; 通常配置（指定しない場合はこれ） position:fixed; 上のようなポジションタグを使う事は可能ですか？ できれば、そのサンプルのようなものを書いてもらえると 助かります。
- ベストアンサー
- HTML
- positionについて
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; }
- ベストアンサー
- CSS
- レイヤーの位置を固定しない方法
こんにちわ、CSSのレイヤーについて質問させていただきます。 レイヤーをセンター寄せのホームページに使うのですが、普通に記述すると、 #Layer1 { position:absolute; left:499px; top:537px; width:130px; height:107px; z-index:1; } となり、絶対位置になります。 これをrelativeを使うと、ウィンドウサイズを変更した際、その場にレイヤーの内容が残り、ページをリロードさせないと相対位置になりません。 これをリロードしなくとも相対位置になるような方法が書かれているホームページをご存知ではないでしょうか？ （ウィンドウのリサイズとレイヤーの位置連動してほしいのです・・・） どうぞよろしくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
お礼
早速試してみたところ、とても分かりやすい例で助かりました。 リストの位置が動くのですね。 確かに、relativeのありがたみを知ることができました。 サンプルと情報ありがとうございました。