• 締切済み

CSSの絶対配置と相対配置の違い

おはようございます。 閲覧していただいてありがとうございます。 タイトル通りなのですが、CSSの絶対配置と相対配置の 違いについて教えて下さい。 本やサイトを色々探してみましたが どれも書き方が微妙に違っていて分かりません; 完全に自己流の書き方ですが、サンプルとして ====================== body{  margin:0px;  padding:0px; } #head{  margin:10px 0px 0px 0px;  padding:0px; } #content{  margin:10px 0px 0px 0px;  padding:0px; } ====================== 上記のような書き方をした場合、 これは絶対配置と相対配置のどちらに あたるのでしょうか? 勉強不足で恥かしいのですが ご教授いただけると幸いです。m(__)m

  • CSS
  • 回答数2
  • ありがとう数0

みんなの回答

noname#23734
noname#23734
回答No.2

Normal flowです。 それに対してrelatively positionedとabsolutely positionedがあるようです。 http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position たぶんNormal flowは通常位置とでも訳すのが妥当なんですかね。 どうもボックスが上から順番に並べられて行く様を言うようです。 それに対してrelatively positionedはその並べられた位置(Normal flow)に対してシフトするようです。 そしてabsolutely positionedが難解でどうも親ブロックやブラウザが表示できる有効範囲が関係して位置が決められる様子を言うようです。 (この部分は解読中です)

  • PED02744
  • ベストアンサー率40% (157/390)
回答No.1

この例だと、どちらにもあたらないと思います。 position:~~ が指定されていないので、staticに配置されます。 あるがままに、配置されます。 positionには: {static, fixed, absolute, relative} の4つの指定があり、staticがデフォルトとなります。 absolute指定をすると該当レイヤ(<DIV>とか)のトップからの位置(絶対位置)、 relative指定をすると現在位置からの位置(相対位置) となります。 fixed指定はIE6では未サポートです。IE7からはサポート予定だそうです。レイヤに依存せず無条件に該当位置を示します

参考URL:
http://www.seo-equation.com/html/css/

関連するQ&A

  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>

  • CSS 絶対配置が効かなくて困っております。

    お世話になります。 ホームページ制作にて行き詰ってしまい、ご教授をいただきたく質問させていただきます。 【問題点】 CSSの絶対配置にて左側にロゴを配置しておいるのですが、IE5.5、IE6、IE7で確認した場合は、絶対配置が効かず?右側の位置に配置されてしまう状態で困っております。FireFoxやChrome、IE8などは問題なく左側に表示されるのですが・・ 【HTML】 <body> <div id="wrapper"> <div id="header"> <div id="logo"> <img src="common_img/logo.gif" /></div> </div> </div> </body> 【CSS】 body { font-family: Meiryo, "メイリオ", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; background-color: #FFF; text-align: center; line-height: 1.7; font-size: 93%; } #wrapper { margin: 0px; padding: 0px; } #header { height: 80px; width: 960px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; position: relative; zoom: 1; } #logo { position: absolute; top: 20px; } 参考までに画像とテストURLを貼らせていただきます。少しでも参考に参考になればご確認ください。 ご教授いただけることを心からお待ちしております。

    • ベストアンサー
    • CSS
  • 外部CSSと HEAD内のCSSの違い

    現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。

    • ベストアンサー
    • Mac
  • 各ブラウザでの絶対配置の違いについて

    今フルCSSで絶対配置を一部使いコーディングをしているのですが、絶対配置で組むと各ブラウザで位置が合っていません。 【参考内部ソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #a { background: #0066CC; height: 100px; width: 100px; position: absolute; left: 10px; top: 200px; } body { margin: 0px; padding: 0px; } #b { background: #CCCC00; height: 150px; width: 150px; top: 30px; position: absolute; left: 10px; } --> </style> </head> <body> <div id="a"> a </div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <div id="b"> b </div> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </body> </html> 左の数字と組み合わせてBOXを見るとIEとFoxではずれているのがわかると思います。どなたかこの解決法がわかる方いたら宜しくお願いします。

    • 締切済み
    • CSS
  • css 初心者です。(壁紙について

    外部cssにて、壁紙にある画像を一枚壁紙にしようと思い、以下の記述を行いましたが、なぜかすべての画像の範囲が収まらず、一部Y軸方向に画像が現れるだけです。どのような事が現なのでしょうか?お心当たりございましたら、お願い致します。 //css部分// @charset "UTF-8"; /* CSS Document */ p:hover { padding:10px; border:1px dotted #ff0000; color:red; } a:hover{color: blue;} h1:first-line{color:green;} p.sample1{color: red;} p.sample2{background-color:#3366ee;margin:30px 20px;padding:45px 50px} p.sample3{background-color:#ff7799;margin:-70px -40px;padding:70px 100px} p.sample4{background-color:#33bb77;margin:-70px -2px;padding:70px 100px} p.sample5{background-image: url("akete.jpg"); bakcground-repeat:no-repeat; background-attachment:fixed; } //html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Untitled Document</title> <link rel="stylesheet" href="begin.css" type="text/css" /> </head> <body> <p class="sample5">あれ?画像欠けてない?</p> </body> </html> 以上をよろしくお願いします。

    • ベストアンサー
    • HTML
  • XHTML+CSS 画像を中心(上下の)に配置したい

    基本部分と思うのですが、下記の記述でどうしても中心にならず、躓いております。 「中心にしたい画像」を800pxの枠内の中央(上下)に置きたい為、 上下の余白を19pxとっているのですが、画像が下寄りになってしまいます。 動作確認はMac:safari3.0 Fire Fox2.0 です。 どなたか教えて下さい。よろしくお願い致します。 ------------------------- 【HTML】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>test</title> <style type="text/css" media="all"> <!-- @import url("test.css"); --> </style> </head> <body> <div id="navi"> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> <h2><img src="中心にしたい画像" width="200" height="12"></h2> </div> </body> </html> ------------------------- 【CSS】 body { margin: 0px; padding: 0px; } #navi { margin: 0px; padding: 0px; height: 50px; width: 800px; border: 3px dotted #333333; } #navi h2 { padding: 19px 30px 19px 0px; margin: 0px; float: left; }

    • ベストアンサー
    • HTML
  • html { } CSS設定の解釈を教えて下さい

    お世話になります。 あるサイトのCSS設定が↓のようになっていました。 +------------------------------------------------------------------ html { margin: 0; padding: 0; min-width: 700px; } body { margin: 0; padding: 0; min-width: 800px; } +------------------------------------------------------------------ bodyの指定はわかるのですが、htmlにCSSをするのは 初耳です。また、min-widthの値が、bodyの同値より 少ないのですが、これは、どういった解釈になるのか、 教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSとページの軽量化

    CSSに記述するスタイルの量によってページの読み込み速度は変わりますか? <1> *{ margin:0px; padding:0px: } <2> *{ margin:0px; padding:0px: } body{ background-color:#000 } 例えばこの場合だと<1>の方が読み込みは早くなったりするのでしょうか?

    • ベストアンサー
    • CSS
  • CSSで画像配置の垂直方向指定

    画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。 縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。 タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。

    • ベストアンサー
    • HTML
  • html cssで困っています

    基本的な質問ですが、 html部分 <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="soto">  <div id="naka"></div> </div> </body> </html> css部分 @charset "utf-8"; #soto{ width:320px; height:480px; background-color:#FB0004; } #naka{ width:160px; height:50px; margin-top:160; margin-left:80px; background-color:#000000; } としたら、赤の長方形の真ん中当たりに黒の長方形がくると思ってやったのですが、全体が下がります。ねらった通りにするにはどのようにしたらいいのでしょうか。paddingで無理矢理したのですが、この記述の根本的なミスはなでしょうか?教えていただければありがたいです。

    • ベストアンサー
    • HTML

専門家に質問してみよう