- ベストアンサー
position : relative + abs
スタイルシートCSSで、positionを使用する場合 position : relative + absolute を使う事が一般的のようですが、どのようなメリットがあるのでしょうか？ よろしくお願いします。 参考サイトhttp://www.css-lecture.com/log/css/037.html
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
absolute を指定した要素の親要素が static の場合、親要素を基準に位置を決めるのでは無くウインドウの左上を基準に位置を指定することになります。 親要素に relative を指定しておくと親要素の左上から指定した位置に配置されます。 サイト全体の左上から一つ一つ位置を決めていくと、途中の要素の高さが変わった場合などは全部位置指定をやりなおす事になりますが、親要素を基準にできると部品部品でデザインできるので便利だったりします。 どのようにデザインしたいかで、何がベストかは替わってくると思いますが。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ちょっとサンプル・・色々書いてみりゃわかる。 ＿＿→タブに変換すること The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) <!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:orika1951@hoge.com" title="send a mail" > ＿＿<link rel="START" href="../index.html"> ＿＿<style type="text/css"> <!-- div{padding:5px 10px;} div.header,div.section,div.footer{ width:auto;margin:10px 200px; } div.section div.nav, div.footer div.nav{ position:absolute;/* fixedでも良い */ width:170px;top:20px; } div.section{position:relative;padding-left:210px;} div.section div.nav{left:10px;} div.footer div.nav{right:10px;} div.section div.figure{ ＿＿height:42px;width:76px; ＿＿float:right; } div.header{background-color:gray;} div.section{background-color:green;} div.footer{background-color:yellow;} div.section div.nav{background-color:lime;} div.nav{background-color:magenta;} div.figure{background-color:white;} --> ＿＿</style> </head> <body> ＿＿<div class="header"><!-- ヘッダー --> ＿＿＿＿<h1>見出し</h1> ＿＿＿＿<div class="aeticle summary"> ＿＿＿＿＿＿<p>段落</p> ＿＿＿＿</div> ＿＿</div> ＿＿<div class="section"><!-- 本文 --> ＿＿＿＿<h2>見出し</h2> ＿＿＿＿<div class="figure"><!-- 挿絵 --> ＿＿＿＿＿＿<img src="http://cmm001.goo.ne.jp/img/logo/goo.gif" width="71" height="37" alt="画像"> ＿＿＿＿</div> ＿＿＿＿<p>段落</p> ＿＿＿＿<p>段落</p> ＿＿＿＿<div class="nav"><!-- navigation --> ＿＿＿＿＿＿<h3>目次</h3> ＿＿＿＿＿＿<p>親がrelative</p> ＿＿＿＿</div> ＿＿</div> ＿＿<div class="footer"><!-- フッター --> ＿＿＿＿<div class="nav"><!-- navigation --> ＿＿＿＿＿＿<h3>目次</h3> ＿＿＿＿＿＿<p>親がstatic</p> ＿＿＿＿</div> ＿＿＿＿<p>段落</p> ＿＿＿＿<p>段落</p> ＿＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
absolute(絶対配置)は、それを含むstatic以外の直近の親コンテナブロックの位置、サイズを基準に配置されます。 もし親のコンテナブロックにstaticのものしかなければ、ウィンドウの左上を基準にします。ユーザーエージェントがプリンターのようなページ媒体の時は、最初のページになります。fixedも同様ですが、ページ媒体のときは各ページの左上を基準にに印刷されます。 ただ、それが一般的かと言うと、決してそうではありません。いえ、そうでない場合のほうが多いかもしれません。 そのサイトは素人さんの書かれたもののようで、そもそもHTMLをそのようなマークアップはしないようにHTMLやCSSの仕様書に記載されています。 次のようなマークアップを考えて見ましょう。absolute-0なんてマークアップはしません。(^^) <body> <div class="header"> <h1>見出し</h1> <div class="aeticle summary">要約</div> </div> <div class="section"> <h2>見出し</h2> <p>段落</p> <div class="nav"> <h3>目次</h3> </div> </div> <div class="footer"> <div class="nav"><!-- navigation --> <h3>目次</h3> </div> </div> </body> この場合、div.sectionがrelativeのとき、div.section div.navをabsoluteすると、親コンテナブロックのdiv.sectionに対して配置されますから、top:0;left:0でdiv.sectionの左上 にきます。 ところが、div.sectionがstaticの場合は、親にstaticなものがありませんから、同じtop:0;lefy:0でウィンドウの左上に行きます。 div.header,div.section,div.footer{ width:auto; margin:10px auto; } div.section div.nav, div.footer div.nav{ position:absolute;/* fixedでも良い */ width:200px; top:100; } div.section{position:relative;} div.section div.nav{ left:0; } div.footer div.nav{ right:0; } div.header{background-color:gray;} div.section{background-color:green;} div.footer{background-color:yellow;} div.section div.nav{background-color:lime;} div.nav{background-color:magenta;} HTMLは文書構造にしたがってマークアップする。後でCSSだけ読んでも何をどうしたかわかるように・・absoluteしていたものをfixedに代えたいけど、これってどこのこと？悩まなくてすむでしょ。footerのnav(navigation Link)をabsoluteしていたけど今度はfixedしようとか・・・ CSSはきちんとカスケードさせれば、HTMLに変なclass名やidを付けなくてすむ」 div.section div.navと、dic.footer.div.navに同じ設定をしたけりゃ、この場合 div div.nav{}でよい。同じ宣言を何度も書かないようにセレクタ文字列はグループ化しよう。また詳細度を計算すると前後に関係なく優先したいものが決められる。 div.section div.nav{background-color:lime;}/* 詳細度 22 */ div.nav{background-color:magenta;} /* 詳細度 11 */ 上が優先される。 きちんと仕様書読みましょう。知ったかぶりの説明サイトだと、量ばかりで得るところ少ない。 視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#positioning-scheme )
