- ベストアンサー
[HTML]absoluteとは一体何の事なのか？
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
CSSのposition: absoluteは祖先となる要素を基準に位置を決定します。よって、No.1の方が仰るように必ずしも画面の最上位最左端が基準になるわけではありません。日本語そのままに解釈することは困難でしょう。 具体的には、positionがstatic（positionに何も指定しなかった場合の値）以外（relative, absolute, fixed, stickyのどれか）に設定されている直近の祖先の要素が基準となります。 つまり <body> <div id="A"> <div id="B"> <div id="absolute">absolute</div> </div> </div> </body> のような構造のHTMLがあり、id="absolute"にposition: absoluteが設定されている場合、 もしid="B"のpositionがstatic以外ならBが基準になり、そうでない場合でAのpositionがstatic以外ならAが基準になります。A、Bいずれのpositionもstaticの場合はbody要素が基準になります。 蛇足かもしれませんがCSSでいう相対位置（position: relativeによる位置）は、その要素のpositionがstaticの場合の位置を基準にします。この場合は自分以外の子要素（例えば自分より前にある兄弟要素）の影響を受けます。 理解の助けになれば幸いです。
その他の回答 (1)
- 4017B
- ベストアンサー率73% (1303/1774)
日本語そのままに解釈してください。「絶対位置」とあるならばその通りの意味で、つまりは「絶対的な位置」という意味です。日本語、それも技術的用語で「絶対的」と言う場合は基本的に「他の要素等に影響されない、その物体の数学的な絶対的数値」という意味で使われます。 で、この場合はwebページ上での文章や画像などのコンテンツの表示位置を指定するCSSに関係する数値などの設定ですので。そこで「絶対」と言う場合には、「そのCSS(スタイル)が直に指定したHTMLタグに影響を及ぼし、その座標位置は他の要素の影響を受けず直に記述した絶対的な数値のみで決定される」という事になります。 例えば… .test1 { position:absolute; top:10px; left:10px; } ～と記述した場合。"CLASS名:test1" が付与されたHTMLタグに囲まれたコンテンツは、その外側をさらに囲う親要素のHTMLタグの座標位置などに関係無く、CSSで指定した絶対的座標位置である「top:10px;left:10px;」の座標位置に強制的に表示される事になります。この場合は「画面サイズ(ブラウザの表示ウィンドウ内)の最上位最左端を top:0px,left:0px として起算し、そこから top:10px,left:10px の位置に表示」となります。 また… .test2 { position:relative; top:10px; left:10px; } ～と記述した場合。やはり同様に "CLASS名:test2" が付与されたHTMLタグに囲まれたコンテンツに影響を与えますが、この場合は少し異なり「相対的な位置」となります。最終的な表示座標は同じ様に「起点となる原点座標を top:0px,left:0px とし、そこから起算する」事には変わりありませんが、「起点となる位置」が表示ウィンドウの最上位最左端では無く、このCSSが適用されたHTMLタグの外側を囲む「親要素のHTMLタグの座標位置の最上位最左端」を原点として起算します。 とりあえず… <html> <head> <style> .oya { width:300px; height:200px; border:1px solid #111; background-color:#eee; } .oya > div { width:99px; height:99px; border:1px solid #555; } .test1 { position:absolute; top:30px; left:150px; background-color:#fee; } .test2 { position:relative; top:10px; left:10px; background-color:#eef; } </style> </head> <body> <div class="oya"> <div class="test1">絶対的</div> <div class="test2">相対的</div> </div> </body></html> ～この様なHTMLファイルを適当に記述してみて、実際にブラウザでどの様に見えるのか実験してみてください。まあこういうのは習うより慣れろで、自分で色々と試して行くのが一番早いかと思います。 - 参考リンク http://www.htmq.com/style/position.shtml
お礼
お返事が遅くなり誠に申し訳ございませんでした。 何度も試行錯誤してみたのですが、やはり難しいですね。 元々苦手な分野なので、数をこなすしかないのかな、と 思いました。 コードまで書いて頂きありがとうございました。
関連するQ&A
- HTMLの画像の位置の指定
HTMLで、画像の位置などを決めるときに、<div align="center"></div>などを使いますが、ＣＳＳやジャバスクリプトで使用している、 position:absolute; 絶対配置 position:relative; 相対配置 position:static; 通常配置（指定しない場合はこれ） position:fixed; 上のようなポジションタグを使う事は可能ですか？ できれば、そのサンプルのようなものを書いてもらえると 助かります。
- ベストアンサー
- HTML
- positionのrelativeとabsoluteについて
本やネットで調べても 相対位置のposition:relative;や、 絶対位置のposition:absolute;の 意味や違いが全然分かりません。 どなたかわかりやすく教えてください。 回答よろしくお願いします。
- ベストアンサー
- HTML
- absolute だけでCSSレイアウト可能？
最近CSSを勉強し始めました！絶対配置のabsoluteに感動です！ あれさえあれば、margin・padding・floatとかいらない気がしました。z-indexを使えば、レイヤーも意識できるし、イラレやフォトショで作る複雑なビジュアルもできそうな気がしてます。なのに、何でやはり主体はmargin・padding・floatでレイアウトを組むのでしょうか？ また、marginで余白を開けて位置を設定するのと、 相対配置のrelativeで位置設定するのとの違いも、よくわかりません。 いろいろググってみたのですが、各々のプロパティーの機能は理解できても、使い分けの部分で、よくわからないままだったりします。 誰か、教えて頂けないでしょうか？ CSS始めて、自分と同じ事思ってる人もいなくはないと感じてて…
- ベストアンサー
- 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
- CSS 配置 Absolute、Margin
お世話になります。 CSSを使用してWebサイトを作成しているのですが、ある画像の上にもう一つの画像を重ねたいと思っています。そんな時まず後ろの画像を配置し、その次に上に重ねる画像をPosition:absolute; margin:xxpx; として表示させています。IE以外で表示されるのと、IEで表示される位置が違うので困っています。 とりあえず画像の表示方法は以下のよう HTML <div id="a"> <img src="aaa.jpg"> <div id="b"></div></div> CSS #a {float:left; overflow:hidden;} #b {position:absolute; margin:-40px; height:10px; width:20px; background:url(aa.jpg);} IEすべて同じように表示されるのかと思いましたが、今日学校のPCで見たところ、IE以外のブラウザで表示されるのと同じように表示されていました。 今のところはIEのみのCSSとその他のCSSとの設定でやりくりしていますが、すべてのブラウザでどんな場合も同じように（まったく同じは無理だとは思いますが）表示させる方法を教えてください。 CSSを使い分けたりするのではなく。一つのCSSだけで；
- ベストアンサー
- その他([技術者向] コンピューター)
- HTMLについて教えてください。
最近ホームページに興味を持ちましてHTML、CSSを覚えているのですがお聞きしたい事があり投稿させていただきました。 text-align:center;で中央表示にしますよね？position:absolute;を使用して中央に表示することは可能なのでしょうか？positionで慣れてしまっているのでどうせならpositionを使用して中央に表示させたいのですが、どなたか簡単な方法はないでしょうか？
- ベストアンサー
- HTML
- スタイルシートでボックスを中央に表示する方法
大ボックスを中央に配置して その中に、小ボックスを上から10、左から20の位置に配置させたいのですが、 大ボックスが中央に配置できません。 少し右側にズレてしまいます。 （ソースは文章最後にあります） そこで大ボックスの position: absolute; を削除すると 中央に配置できるものの、小ボックスが外に飛び出して ブラウザを基点とした上から10、左から20の位置に配置されてしまいます。 tableタグを使わずにCSSのみで 大ボックスを中央に。 その大ボックスの中に大ボックスの左上を基点として上から10、左から20の位置に 小ボックスを配置する方法はないのでしょうか・・・。 よろしくお願い致します。 <html> <head> <title>box</title> <style type="text/css"> <!-- .boxL { /* 大ボックス */ width: 400px; height: 100px; background-color: green; position: absolute; } .box1 { /* 小ボックス */ width: 75px; height: 30px; background-color: lightblue; position: absolute; top: 10px; left: 20px; } --> </style> </head> <body> <div align="center"> <div class="boxL"> <div class="box1">小ボックス</div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- maqueとabsolute
<html> <head> <style type="text/css"> <!-- .1{background-color:blue;width:200;height:100; position:absolute;} .2{background-color:red;width:200;height:100;} --> </style> </head> <body> <marquee direction="right"> <span class="1"></span> </marquee> <marquee direction="left"> <div class="2"></div> </marquee> </body> このようにＢｏｘを2つ書きマーキーで右からと左からの交差を作りたいのですが、なぜかclass="2"でその列にほかのBOXが表示できないようです。つまりマージンでclass１をちょっと下にずらすと、半分切れた状態になります。position:absolute;を消してもらうとわかるのですが、アブソでない状態であれば上下にずれますが、行き来していますので、もう一歩だと思うのですが・・・。 どこが間違っているかわかりません。教えてください
- ベストアンサー
- HTML
- 「position:absolute」のIEのバグへの対処方法
CSS #navbar { position: absolute; z-index: 1 } HTML <div id="navbar"> 略 </div> <div id="contents"> 略 </div> CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。 このため「position:relative;」としてみたのですが．． メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。 なにかよい方法はありますでしょうか。
- ベストアンサー
- HTML
- このページもpositionプロパティでボックスが配置されているのでしょうか？
お世話になります。 http://www.goo.ne.jp/ 上記のgooのサイトなんですけど このサイトもcssのpositionプロパティで ボックスの配置が制御されているのでしょうか？ cssファイルをみてもpositionプロパティが下部だけで ほかにみつからないのですが・・・。 どのようにして配置されているのでしょうか？ 教えてください。お願いします。
- ベストアンサー
- CSS
お礼
お返事が遅くなり申し訳ありませんでした。 あれから何度も試行錯誤したのですが、やはり難解で ましてや仰る通り「絶対」とは何か？と観念的に考えると 余計に混乱を起こしました。 ただ短いコードと平易な説明は大変助かりました。 ありがとうございました。