- ベストアンサー
[HTML]absoluteとは一体何の事なのか？
環境： Windows10 HTML5 CSS3 MicrosoftEdge Webデザイン初学者です。 positionプロパティのボックスの配置方法を決める値として 用いられる「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% (1336/1814)
日本語そのままに解釈してください。「絶対位置」とあるならばその通りの意味で、つまりは「絶対的な位置」という意味です。日本語、それも技術的用語で「絶対的」と言う場合は基本的に「他の要素等に影響されない、その物体の数学的な絶対的数値」という意味で使われます。 で、この場合は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
お礼
お返事が遅くなり誠に申し訳ございませんでした。 何度も試行錯誤してみたのですが、やはり難しいですね。 元々苦手な分野なので、数をこなすしかないのかな、と 思いました。 コードまで書いて頂きありがとうございました。
お礼
お返事が遅くなり申し訳ありませんでした。 あれから何度も試行錯誤したのですが、やはり難解で ましてや仰る通り「絶対」とは何か？と観念的に考えると 余計に混乱を起こしました。 ただ短いコードと平易な説明は大変助かりました。 ありがとうございました。