ホームページ制作＆SEO
絶対的な位置とは、ここでは『親要素のボックスを基準とした絶対的な位置』を意味します。
以下の画像がこのページだとすると、親要素はグレーの箇所になります。
なので、仮に上から100ピクセル、左から100ピクセルの絶対的な位置に指定するとすれば、『親要素のボックスの左上を基準として、下に100ピクセル、右に100ピクセルの位置』を意味します。
以下のように記述ることにより、その記述された<p>で囲まれた箇所のボックスを、上を基準に100ピクセル、左を基準に100ピクセルの絶対的な位置に指定することができます。
| <p style="position:absolute;top:100px;left:100px;border-style:solid;"> |
これをこのページに表示すると、デザインが崩れてしまったように見えてしまうため、別ページにて表示例を紹介します。
上の赤文字の部分の【absolute】が絶対的な位置を指定する記述になります。
ページの<head>内に記述する場合、外部のCSSファイルに記述する場合もこの赤文字の部分は同じになります。
以下のように<head>内に記述することにより、そのファイルの読み込まれたページの<p>で囲まれた箇所全てのボックスを、上を基準に100ピクセル、左を基準に100ピクセルの絶対的な位置に指定することができます。
解りやすいよう、<head>から記述します。この場合の表示は前のものと同じなので省きます。
| <head> <style type="text/css"> <!--p{position:absolute;top:100px;left:100px;border-style:solid;}--> </style> </head> |
以下のように外部CSSファイルに記述することにより、その記述されたページの<p>で囲まれた箇所全てのボックスを、上を基準に100ピクセル、左を基準に100ピクセルの絶対的な位置に指定することができます。この場合の表示も前のものと同じなので省きます。
